effects css filters blend modes grayscale blur glassmorphism

CSS filters and blend modes

CSS filters and blend modes let you apply non-destructive visual effects to images and elements directly in the browser — no image editing software required. This article covers the filters available in the Effects pane, mix-blend-mode for compositing, and backdrop-filter for the glassmorphism effect.

CSS filters in the Effects pane

Select any element and open the Effects pane. The Filter section lists all available CSS filter functions. Each has a slider and a numeric input.

Filter	What it does	Common use
`blur`	Gaussian blur in pixels	Backgrounds, depth-of-field
`brightness`	Lighten or darken (1 = original)	Hover darkening on images
`contrast`	Increase or decrease contrast	Artistic treatment
`grayscale`	0 = full color, 1 = fully grey	Greyed-out default, color on hover
`hue-rotate`	Rotate the color wheel in degrees	Brand-tinted image effects
`invert`	Invert all colors	Dark/light mode image treatment
`opacity`	Transparency (1 = opaque, 0 = invisible)	Prefer CSS `opacity` property instead
`saturate`	Increase or decrease color saturation	Vivid image pop on hover
`sepia`	Apply a warm sepia tone	Vintage/editorial aesthetic

Multiple filters can be stacked — Site Designer applies them in the order listed, from top to bottom.

Filter transitions on hover

The most impactful use of filters is transitioning them on hover. A classic technique: set filter: grayscale(1) by default and transition to filter: grayscale(0) on hover. The image is desaturated at rest and reveals full color when the user interacts with it.

Select the image. In the Effects pane, set grayscale to 1.
Add a Transition: Property filter, Duration 0.35s, Timing ease.
Enter :hover mode. Set grayscale to 0. Exit hover mode.

The same technique works with brightness (darken an image on hover), saturate (increase vibrancy), or any combination.

mix-blend-mode

mix-blend-mode controls how an element’s pixels composite with the pixels of what’s behind it. It works like Photoshop’s layer blend modes.

Mode	Effect
`multiply`	Darkens — white becomes transparent, black stays black
`screen`	Lightens — inverse of multiply
`overlay`	High contrast combination of multiply and screen
`darken`	Shows the darker of the two layers per pixel
`lighten`	Shows the lighter of the two layers per pixel
`color`	Applies the hue and saturation of the element, keeping the luminosity of the background
`luminosity`	Applies the luminosity of the element, keeping the color of the background

Set mix-blend-mode in the Style pane under Display, or search for “blend” in the property search field.

A common application: place a solid color div over an image and set mix-blend-mode: multiply to tint the image with that color. Change the div’s color to change the tint without touching the image.

backdrop-filter (glassmorphism)

backdrop-filter applies a filter to everything behind an element — not to the element itself. The most common use is backdrop-filter: blur(12px) on a semi-transparent overlay to create the frosted glass (glassmorphism) effect.

To achieve glassmorphism in Site Designer:

The overlay element needs a semi-transparent background color — for example, rgba(255, 255, 255, 0.15).
Set backdrop-filter: blur(12px) in the Style pane.
Set border: 1px solid rgba(255, 255, 255, 0.2) for the characteristic glass edge.

Performance notes

CSS filters (especially blur on large areas) and backdrop-filter trigger GPU compositing. They are generally smooth for single elements but can stack up. Avoid applying filter effects to elements that contain many child nodes, and always test on a real device rather than assuming the desktop preview represents worst-case performance.