The backdrop-filter CSS property allows you to apply visual effects (like blur, brightness, contrast, etc.) to the area behind an element — making it perfect for frosted glass UIs, soft overlays, or modern modal designs. Prerequisites are:
- Supported in modern browsers like Chrome, Edge, and Safari.
- Requires transparency (like
rgbaorbackdrop-filteron semi-transparent elements). - May need
background-color: rgba(..., .5)andbackdrop-filterto both be set for effects to show properly.
This is the syntax:
1 2 3 | .element { backdrop-filter: blur(10px); } |
Supported Filters
| Filter | Description |
|---|---|
blur(px) | Blurs the background |
brightness(%) | Adjusts background brightness |
contrast(%) | Adjusts contrast of background |
grayscale(%) | Converts background to grayscale |
hue-rotate(deg) | Rotates hue of background color |
invert(%) | Inverts background colors |
opacity(%) | Adjusts background opacity |
saturate(%) | Saturates background |
sepia(%) | Applies sepia tone |
Example 1: Frosted Glass Card
See the Pen
Frosted Glass Card by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
---
Example 2: Multiple Filters Combined
See the Pen
Multiple Filters Combined by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
Tips & Notes
Always ensure the element has a transparent background to actually “see” the backdrop effect. On some platforms (like Safari), you might need -webkit-backdrop-filter for compatibility. Remember that applying heavy blur on many elements can affect performance. In certain situations, you can use linear-gradient to selectively blur some areas plus blend different colors. There are online free tools to generate linear gradient:
1 2 3 4 5 | .div-name { background: linear-gradient(86deg, rgba(255,255,255,1) 26%, rgba(255,255,255,0.8540208319655987) 46%, rgba(255,255,255,1) 80%, rgba(255,255,255,0.7475782549347865) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,0.764384977623862) 100%, rgba(255,255,255,0.7475782549347865) 100%, rgba(255,255,255,0.9100432409291842) 100%, rgba(255,255,255,0) 100%, rgba(255,255,255,1) 100%); } |
One such example is my site abhishekghosh.com‘s navigation bar.
backdrop-filter brings a powerful visual layer to CSS, letting you achieve modern UI effects with just a few lines of code. Whether you’re building cards, modals, navbars, or overlays, it’s a valuable tool for any front-end developer.
