Effect

Filter

Style syntax for applying graphic effects to an element.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
filter:value|value|filter: value value
filter:nonefilter: none
filter:url(svg)filter: url(svg)
blur(value)filter: blur(value)
brightness(value)filter: brightness(value)
contrast(value)filter: contrast(value)
grayscale(value)filter: grayscale(value)
hue-rotate(degree)filter: hue-rotate(degree)
invert(value)filter: invert(value)
sepia(value)filter: sepia(value)
saturate(value)filter: saturate(value)
opacity(value)filter: opacity(value)
drop-shadow(offset-x|offset-y|blur-radius|color)filter: drop-shadow(offset-x offset-y blur-radius color)

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="filter:none:hover filter:none@sm filter:none@dark filter:none@print"></div>
PREVIOUS
Box Shadow

Style syntax for adding shadow effects around an element.

NEXT
Mask Image

Style syntax for setting the image that is used as mask layer for an element.

MIT License © Aoyue Design LLC.