Adjust filters on the left
to preview the effect.
-webkit- prefix).
The generated CSS includes the -webkit- prefix automatically.
CSS Backdrop Filter Generator creates and previews CSS backdrop-filter effects: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. These filters apply to the content behind an element (not the element itself), enabling glass morphism UI effects, frosted glass overlays, and blur behind modals. Adjust values with sliders and copy the generated CSS.
backdrop-filter applies filter functions to the area behind the element — whatever is rendered in the stacking context behind it. This requires the element itself to have some transparency (transparent or semi-transparent background) for the backdrop to show through. Unlike filter (which applies to the element's own content), backdrop-filter blurs/modifies what's visible through the element.
Glass morphism is a design trend using backdrop-filter: blur(10px) with a semi-transparent background (rgba(255,255,255,0.1) or rgba(0,0,0,0.2)), a subtle border, and box-shadow. The result is a 'frosted glass' panel that blurs content behind it. Browser support: all modern browsers support backdrop-filter. Safari requires the -webkit- prefix (-webkit-backdrop-filter). Internet Explorer does not support it.
Frosted glass nav bar
Result: backdrop-filter: blur(10px) saturate(180%); background: rgba(255,255,255,0.72)
Dark modal overlay
Result: backdrop-filter: blur(4px) brightness(0.7); background: rgba(0,0,0,0.3)
Color-shifting panel
Result: backdrop-filter: blur(8px) hue-rotate(90deg); background: rgba(100,100,255,0.15)
What is the difference between filter and backdrop-filter?
filter applies visual effects to the element and its contents — blurring the element itself. backdrop-filter applies effects to the area behind the element — blurring what's visible through the element. For a 'frosted glass' panel that shows blurred content behind it, use backdrop-filter. For a blurred photo or text element, use filter: blur().
Why does backdrop-filter not work on my element?
Backdrop-filter requires the element to have some transparency (background color with alpha < 1 or no background). If the background is opaque white, nothing from behind shows through — the effect is invisible. Also check: (1) Is the element in a stacking context where compositing is supported? (2) Safari requires -webkit-backdrop-filter. (3) Check that the browser and GPU support it — some integrated GPUs may disable backdrop-filter for performance.
What is glass morphism and how do I create it?
Glass morphism is a design style using: backdrop-filter: blur(10-20px), semi-transparent background (rgba(255,255,255,0.1)), a thin light border (border: 1px solid rgba(255,255,255,0.2)), and subtle box shadow. The element appears to be frosted glass floating above a colorful background. For dark themes: rgba(0,0,0,0.2) background. Ensure sufficient color contrast for text inside the glass element — the blurred background can reduce readability.
Does backdrop-filter affect performance?
Yes — backdrop-filter requires the browser to composite the content behind the element into a texture, apply the filter, and composite it back. This is GPU-intensive. Multiple elements with backdrop-filter on the same page can significantly impact performance, especially on mobile. Test on mobile devices before deploying. If performance is a concern, consider using a pre-blurred static image as a background instead of real-time backdrop-filter.
What filters can be combined with backdrop-filter?
You can combine multiple filter functions space-separated: backdrop-filter: blur(4px) brightness(1.1) saturate(1.5). Available functions: blur(px), brightness(0-∞), contrast(0-∞), grayscale(0-1), hue-rotate(deg), invert(0-1), opacity(0-1), saturate(0-∞), sepia(0-1), and drop-shadow(). The order matters — they're applied left to right. Most design effects use blur as the primary function with brightness or saturate adjustments.