Choose filter or backdrop-filter, start from a preset and adjust the controls while watching the preview. Copy the CSS declarations to apply the effect to your page.
Runs locally in your browserThe workbench composes one filter declaration from eight functions: brightness, contrast, saturate, grayscale, sepia, hue-rotate, blur and opacity. Choose the property first — filter paints on the element itself, backdrop-filter paints on whatever sits behind it — then move the controls and watch the live stage update.
The export panel holds the finished declaration: a single filter line, or the pair of backdrop-filter lines with the -webkit- prefix Safari still needs. Copy them into your own rule. Nothing leaves the browser, and the page keeps working offline.
filter applies to the element and everything it paints, children and text included. backdrop-filter leaves the element itself alone and filters the pixels behind it, which is why a glass panel needs a partially transparent background before the effect is visible at all.
Support is not identical: Safari still requires the -webkit-backdrop-filter prefix, and the export panel writes both lines for that reason. When an engine does not support the property it ignores the declaration and the element renders normally, so treat glass as decoration rather than structure.
Each control maps to one CSS function: brightness, contrast and saturate take percentages around the neutral 100%; grayscale, sepia and opacity run from 0 to 100%; hue-rotate takes degrees from -360 to 360; blur takes pixels in 0.5 steps. They are written in a fixed order and apply in that order, so hue-rotate(-8deg) before blur(14px) does not always match the reverse.
A value left at its neutral position is omitted from the output. The string is still a single declaration, so each function transforms the result of the one before it rather than the original pixels.
Every field is clamped to its own range before the CSS is written — brightness and contrast 0–300, saturate 0–500, grayscale, sepia and opacity 0–100, hue-rotate -360–360, blur 0–40 in 0.5 steps. Typing -5 into blur or 500 into grayscale snaps back to 0 and 100 when the field loses focus, and an empty field returns to the value it had. That keeps the exported declaration valid: browsers drop the whole filter when one function carries a value they cannot parse.
filter and backdrop-filter are composited on the GPU and blur is the expensive function; a 14px backdrop blur across a large area can cost more than everything else combined, especially while scrolling. Keep the blurred surface small, and test on the slowest device you support before shipping the effect.