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]

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>
Box Shadow

Style syntax for adding shadow effects around an element.

Mask Image

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

MIT License © Aoyue Design LLC.