Syntax

Filter

Applying graphic effects to an element.

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

Overview

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 based on different states using selectors and applying conditionally.

<div class="filter:none:hover filter:none@sm filter:none@dark filter:none@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.