Filters
A quick and flexible way to apply common visual effects
Filters allow you to apply various visual effects to elements, such as blurring, adjusting brightness, or adding drop shadows. These filters are applied via the filter settings on most elements and enable quick visual enhancements.
Type
Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with Transitions.
Type Properties | Description |
---|---|
None | No effect classes will be applied to the component. |
Static | Enable effects. |
Hover | Enable Start and End state hover effects. |
Filters
Blur - Applies a blur to the contents of the object. Vvalue is set in pixels.
Brightness - Darken or lighten the image, value is set in percent, 100 is the default value.
Sturate - Asjust the colour saturation, 0 is greyscale, 100 is the default.
Drop Shadow - Apply a drop shadow from the theme studio.
Backdrop Filters
Blur - Applies a blur effect to the content behind the element, rather than the element itself. It creates a frosted glass-like effect, which is commonly used in modern web design to maintain focus on the content in the foreground while still giving a glimpse of what’s behind. To see this effect, ensure your component has a completely transparent background or semi-transparent background colour.
Filters UI in Elements
Last updated