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

We are Realmac Software. We make nice things.