Loading…

How to use CSS Backdrop Filter Generator

Adjust blur, brightness, and saturation sliders, and the tool renders a live preview with the matching backdrop-filter CSS.

Frequently asked questions

What does backdrop-filter do?

It applies graphical effects like blur to the area behind an element, not the element itself.

Why is the -webkit- prefix included?

Some browsers still require -webkit-backdrop-filter, so both are output for maximum support.

Why can't I see the blur?

backdrop-filter only affects content behind the element, so it needs a colorful background to show.

More CSS Generators

CSS Blend Mode Generator
Preview all mix-blend-mode values on overlapping shapes
CSS Mask Fade Generator
Fade element edges with mask-image linear gradients
CSS 3D Perspective Generator
Rotate elements in 3D space with perspective and live preview
CSS Aspect Ratio Generator
Get aspect-ratio plus the padding-hack fallback for any ratio
CSS Multi-Column Generator
Build newspaper-style column-count layouts with column rules
CSS Object Fit Generator
Preview object-fit and object-position on images live
CSS Line Clamp Generator
Truncate multi-line text with -webkit-line-clamp ellipsis
CSS Writing Mode Generator
Set vertical and horizontal writing-mode with text-orientation
CSS Image Rendering Generator
Control pixelated vs smooth image-rendering with live preview
CSS Type Scale Generator
Generate a modular type scale as CSS custom properties
CSS Hex to RGBA Converter
Convert hex colors to rgba() with an adjustable alpha channel
CSS Gradient Generator
Build linear, radial and conic gradients with live preview

← View all CSS GeneratorsBrowse all 1,100+ tools →