Live playground, glassmorphism, filter-order gotcha, and real UI patterns.
Drag any slider to apply the filter. Stack multiple filters and see both the visual result and the generated CSS instantly.
Filters are applied left to right, each one operating on the output of the previous. The same filters in different order produce different results:
backdrop-filter applies to the content behind the element — the element must be semi-transparent to reveal it. Click presets or drag the slider.
Applying hue-rotate() to :root or a page wrapper rotates every color on the page simultaneously — an instant theme switcher with one CSS value.
backdrop-filter to a position:fixed element on iOS Safari can cause severe scroll performance issues — the blurred content repaints on every scroll frame.
Workaround: use position:sticky instead, or limit backdrop-filter to elements that don't move during scroll.
Hover the demos where indicated. All effects are CSS-only.
Hover each card. Top: brightness, bottom-left: grayscale-to-color on hover, bottom-right: blur removes on hover.
drop-shadow() follows the element's transparent pixels — perfect for icons, PNGs, and SVGs. box-shadow follows the rectangular bounding box.
No extra CSS classes or image variants needed — filter visually communicates unavailability on any element.
Stacking multiple drop-shadow() with increasing radius creates a realistic neon glow. currentColor ties the glow to the element's text color.
Load a tiny thumbnail, apply heavy blur() — the browser can't tell the difference. A 4KB image becomes a 2MB-quality hero background.
The -webkit- prefix is still required for Safari support. Always include both declarations.
filter other than none creates a new stacking context — exactly like opacity.
This means children of a filtered element cannot z-index above elements outside it.
If you're fighting a z-index battle and nothing works, check if an ancestor has a filter applied.
See CSS z-index & stacking contexts for the full explanation.