The backdrop-filter property applies graphical effects to the area behind an element. Here's how to create stunning visual effects.
Basic Usage#
1/* Blur effect */
2.blur {
3 backdrop-filter: blur(10px);
4}
5
6/* Brightness adjustment */
7.bright {
8 backdrop-filter: brightness(1.2);
9}
10
11/* Grayscale */
12.grayscale {
13 backdrop-filter: grayscale(100%);
14}
15
16/* Multiple filters */
17.combined {
18 backdrop-filter: blur(10px) brightness(1.1) saturate(1.2);
19}Frosted Glass Effect#
1/* Classic frosted glass */
2.frosted-glass {
3 background: rgba(255, 255, 255, 0.2);
4 backdrop-filter: blur(10px);
5 border: 1px solid rgba(255, 255, 255, 0.3);
6 border-radius: 16px;
7}
8
9/* Dark frosted glass */
10.dark-glass {
11 background: rgba(0, 0, 0, 0.3);
12 backdrop-filter: blur(12px);
13 border: 1px solid rgba(255, 255, 255, 0.1);
14}
15
16/* Colorful frosted glass */
17.colorful-glass {
18 background: rgba(59, 130, 246, 0.2);
19 backdrop-filter: blur(10px) saturate(1.5);
20 border: 1px solid rgba(59, 130, 246, 0.3);
21}Navigation Bar#
1/* Sticky nav with blur */
2.navbar {
3 position: sticky;
4 top: 0;
5 background: rgba(255, 255, 255, 0.8);
6 backdrop-filter: blur(10px);
7 -webkit-backdrop-filter: blur(10px);
8 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
9 z-index: 100;
10}
11
12/* Dark mode nav */
13.navbar.dark {
14 background: rgba(17, 24, 39, 0.8);
15 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
16}
17
18/* Transparent until scroll */
19.navbar-transparent {
20 background: transparent;
21 backdrop-filter: none;
22 transition: background 0.3s, backdrop-filter 0.3s;
23}
24
25.navbar-transparent.scrolled {
26 background: rgba(255, 255, 255, 0.9);
27 backdrop-filter: blur(10px);
28}Modal Overlay#
1/* Blurred modal backdrop */
2.modal-overlay {
3 position: fixed;
4 inset: 0;
5 background: rgba(0, 0, 0, 0.5);
6 backdrop-filter: blur(4px);
7 display: flex;
8 align-items: center;
9 justify-content: center;
10}
11
12.modal-content {
13 background: rgba(255, 255, 255, 0.95);
14 backdrop-filter: blur(20px);
15 border-radius: 16px;
16 padding: 2rem;
17 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
18}
19
20/* Animated overlay */
21.modal-overlay {
22 backdrop-filter: blur(0);
23 transition: backdrop-filter 0.3s ease;
24}
25
26.modal-overlay.active {
27 backdrop-filter: blur(4px);
28}Card Effects#
1/* Glass card */
2.glass-card {
3 background: rgba(255, 255, 255, 0.15);
4 backdrop-filter: blur(10px);
5 border-radius: 20px;
6 border: 1px solid rgba(255, 255, 255, 0.2);
7 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
8 padding: 2rem;
9}
10
11/* Hover effect */
12.glass-card:hover {
13 background: rgba(255, 255, 255, 0.25);
14 backdrop-filter: blur(12px);
15 transform: translateY(-4px);
16}
17
18/* Gradient glass */
19.gradient-glass {
20 background: linear-gradient(
21 135deg,
22 rgba(255, 255, 255, 0.2),
23 rgba(255, 255, 255, 0.05)
24 );
25 backdrop-filter: blur(10px);
26 border: 1px solid rgba(255, 255, 255, 0.2);
27}Filter Functions#
1/* Blur - radius in pixels */
2.blur {
3 backdrop-filter: blur(10px);
4}
5
6/* Brightness - 1 is normal */
7.brightness {
8 backdrop-filter: brightness(1.5);
9}
10
11/* Contrast - 1 is normal */
12.contrast {
13 backdrop-filter: contrast(0.8);
14}
15
16/* Grayscale - 0-100% */
17.grayscale {
18 backdrop-filter: grayscale(50%);
19}
20
21/* Hue rotate - degrees */
22.hue-rotate {
23 backdrop-filter: hue-rotate(90deg);
24}
25
26/* Invert - 0-100% */
27.invert {
28 backdrop-filter: invert(100%);
29}
30
31/* Opacity - 0-100% */
32.opacity {
33 backdrop-filter: opacity(50%);
34}
35
36/* Saturate - 1 is normal */
37.saturate {
38 backdrop-filter: saturate(2);
39}
40
41/* Sepia - 0-100% */
42.sepia {
43 backdrop-filter: sepia(50%);
44}
45
46/* Drop shadow */
47.shadow {
48 backdrop-filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25));
49}Sidebar#
1/* Glass sidebar */
2.sidebar {
3 position: fixed;
4 top: 0;
5 left: 0;
6 width: 280px;
7 height: 100vh;
8 background: rgba(255, 255, 255, 0.1);
9 backdrop-filter: blur(20px);
10 border-right: 1px solid rgba(255, 255, 255, 0.1);
11 padding: 2rem;
12}
13
14/* Mobile drawer */
15.drawer {
16 position: fixed;
17 bottom: 0;
18 left: 0;
19 right: 0;
20 background: rgba(255, 255, 255, 0.95);
21 backdrop-filter: blur(10px);
22 border-radius: 24px 24px 0 0;
23 padding: 1.5rem;
24 transform: translateY(100%);
25 transition: transform 0.3s ease;
26}
27
28.drawer.open {
29 transform: translateY(0);
30}Tooltip#
1/* Glass tooltip */
2.tooltip {
3 position: absolute;
4 background: rgba(0, 0, 0, 0.7);
5 backdrop-filter: blur(8px);
6 color: white;
7 padding: 0.5rem 1rem;
8 border-radius: 8px;
9 font-size: 0.875rem;
10 white-space: nowrap;
11}
12
13/* Light tooltip */
14.tooltip-light {
15 background: rgba(255, 255, 255, 0.9);
16 backdrop-filter: blur(8px);
17 color: #1f2937;
18 border: 1px solid rgba(0, 0, 0, 0.1);
19 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
20}Buttons#
1/* Glass button */
2.glass-button {
3 background: rgba(255, 255, 255, 0.2);
4 backdrop-filter: blur(10px);
5 border: 1px solid rgba(255, 255, 255, 0.3);
6 border-radius: 12px;
7 padding: 0.75rem 1.5rem;
8 color: white;
9 cursor: pointer;
10 transition: all 0.2s ease;
11}
12
13.glass-button:hover {
14 background: rgba(255, 255, 255, 0.3);
15 backdrop-filter: blur(12px);
16}
17
18/* Primary glass button */
19.glass-button-primary {
20 background: rgba(59, 130, 246, 0.6);
21 backdrop-filter: blur(10px);
22 border: 1px solid rgba(59, 130, 246, 0.8);
23}Input Fields#
1/* Glass input */
2.glass-input {
3 background: rgba(255, 255, 255, 0.1);
4 backdrop-filter: blur(10px);
5 border: 1px solid rgba(255, 255, 255, 0.2);
6 border-radius: 12px;
7 padding: 0.75rem 1rem;
8 color: white;
9 outline: none;
10}
11
12.glass-input::placeholder {
13 color: rgba(255, 255, 255, 0.5);
14}
15
16.glass-input:focus {
17 background: rgba(255, 255, 255, 0.15);
18 border-color: rgba(255, 255, 255, 0.4);
19}
20
21/* Search bar */
22.glass-search {
23 display: flex;
24 align-items: center;
25 background: rgba(255, 255, 255, 0.1);
26 backdrop-filter: blur(10px);
27 border-radius: 100px;
28 padding: 0.5rem 1rem;
29 gap: 0.5rem;
30}Browser Support#
1/* Feature detection */
2@supports (backdrop-filter: blur(10px)) {
3 .glass {
4 background: rgba(255, 255, 255, 0.2);
5 backdrop-filter: blur(10px);
6 }
7}
8
9@supports not (backdrop-filter: blur(10px)) {
10 .glass {
11 /* Fallback - solid background */
12 background: rgba(255, 255, 255, 0.9);
13 }
14}
15
16/* Safari prefix */
17.glass {
18 -webkit-backdrop-filter: blur(10px);
19 backdrop-filter: blur(10px);
20}Performance#
1/* Optimize performance */
2.glass {
3 /* Use will-change sparingly */
4 will-change: backdrop-filter;
5
6 /* Contain the effect */
7 contain: paint;
8
9 /* Use hardware acceleration */
10 transform: translateZ(0);
11}
12
13/* Reduce blur radius for better performance */
14.glass-subtle {
15 backdrop-filter: blur(4px); /* Lighter than blur(20px) */
16}
17
18/* Disable on reduced motion */
19@media (prefers-reduced-motion: reduce) {
20 .glass {
21 backdrop-filter: none;
22 background: rgba(255, 255, 255, 0.95);
23 }
24}Best Practices#
Usage:
✓ Keep blur radius reasonable (4-20px)
✓ Use with semi-transparent backgrounds
✓ Add borders for definition
✓ Include vendor prefixes
Performance:
✓ Limit affected area size
✓ Avoid on scrolling content
✓ Test on lower-end devices
✓ Provide fallbacks
Design:
✓ Subtle blur often works best
✓ Combine with shadows
✓ Match brand colors
✓ Consider contrast for text
Avoid:
✗ Large blur radii (40px+)
✗ Many overlapping filters
✗ Full-page backdrop-filter
✗ Missing fallbacks
Conclusion#
The backdrop-filter property enables beautiful frosted glass effects by blurring or adjusting the content behind an element. Use it for navigation bars, modals, cards, and UI overlays. Always include the -webkit-backdrop-filter prefix for Safari support, provide fallbacks for unsupported browsers, and be mindful of performance impacts on large areas or low-end devices.