CSS Filter & Blend Mode Playground
Every filter function, backdrop-filter, and all sixteen blend modes — on a subject drawn in CSS, with nothing loaded
filter applies to the element and everything inside it, including its text and its children. Switch to backdrop below to filter what is behind instead.
.subject {
/* no filter functions active */
}<!-- every filter is at its default, so there is nothing to apply -->Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Switches every slider below from `filter` to `backdrop-filter`. The functions are identical; what changes is whether they hit the element or what is showing through it.
Worth switching: a contrast bump that flatters artwork will often destroy small text, and blur on a UI card shows you what your users see mid-transition.
A gaussian blur in pixels. The one function here that is genuinely expensive — it repaints every frame it animates, so blur a still element freely and an animating one carefully.
Multiplies every channel. Above 100% it clips the highlights permanently — detail lost here cannot be recovered by lowering contrast afterwards.
Pushes values away from mid-grey. The usual pairing is a small contrast lift with a small brightness cut, because contrast alone tends to darken the result.
Under 100% drains colour; over, it pushes. Above roughly 200% it stops looking vivid and starts looking broken, which is exactly what the duotone preset exploits.
Spins every hue around the wheel by this many degrees. Combined with a full grayscale and sepia, it is how you tint an image to one arbitrary colour without touching the source.
Removes colour. Reaching for this and saturate(0) is the same result by two routes; grayscale composes better with sepia afterwards.
Maps everything onto a warm brown axis. On its own it is a photo-app cliché; at 100% with a hue-rotate after it, it is a duotone.
Flips every channel. Mostly useful partially, or on a monochrome icon that has to survive a theme it was not drawn for.
Same result as the opacity property here, but it composes inside the filter chain — so anything after it sees the faded version, which the property cannot do.
Not box-shadow. This traces the element's actual alpha, so a transparent PNG or an SVG icon casts a shadow shaped like the artwork rather than like its rectangle. It is the only way to shadow a cut-out.
How the subject composites with what is underneath. Unlike the filters above, this is not an adjustment of the element — it is a rule for how two layers combine, so it does nothing at all if there is nothing behind.
Keep this look. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Glassmorphism GeneratorTune backdrop-blur + saturation + opacity + border + shadow + inner highlight for a frosted-glass card. Includes @supports fallback for older browsers.
- Live Palette PreviewYour palette on real components — a navbar, a hero, pricing, a dashboard, a footer — repainted as you drag, in both themes, with the contrast of every token pair checked while you do it. Not swatches next to lorem ipsum.
- Token GeneratorBuild the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.