Effects
Drop Shadows
About Drop Shadows
Drop shadows are shadow effect that get added around an element's frame. The box-shadow property allows you to cast a drop shadow from the frame of almost any element.
A box-shadow is described by X and Y offsets relative to the element (sometimes referred to as a collection called "distance"), blur and spread radius, and color.
Shadows are affected by border-radius. Box shadows can also be stacked on top of each other to create a more realistic-looking shadow.
Our system comes with 5 shadow styles ranging from XS to XL with 1 reset class of none.
Opacity
About Opacity
Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements.
Our system comes with 10 opacity styles in increments of 10 from 10 to 100. (10, 20, 30, etc.) with one clear class of 0.
Border Radius
About Border Radius
Border radius rounds the corners of an element's outer border edge.
Our system comes with 5 sizes ranging from S to XL, pill (full), and a clear class of none.
Backdrop Blur
About Backdrop Blur
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
Our system comes with a pre-set sizes ranging from S to 2XL, and a clear class of none.