backdrop-filter applies effects to the area behind an element. Here's how to use it effectively.
Basic Usage#
1/* Blur effect */
2.frosted-glass {
3 backdrop-filter: blur(10px);
4 background-color: rgba(255, 255, 255, 0.5);
5}
6
7/* Multiple filters */
8.glass {
9 backdrop-filter: blur(10px) saturate(180%);
10}
11
12/* All filter functions work */
13.effects {
14 backdrop-filter: blur(4px); /* Gaussian blur */
15 backdrop-filter: brightness(0.8); /* Brightness */
16 backdrop-filter: contrast(1.2); /* Contrast */
17 backdrop-filter: grayscale(1); /* Grayscale */
18 backdrop-filter: hue-rotate(90deg); /* Hue rotation */
19 backdrop-filter: invert(1); /* Invert colors */
20 backdrop-filter: opacity(0.5); /* Opacity */
21 backdrop-filter: saturate(2); /* Saturation */
22 backdrop-filter: sepia(1); /* Sepia tone */
23}Glassmorphism Effect#
1/* Classic glassmorphism */
2.glass-card {
3 background: rgba(255, 255, 255, 0.25);
4 backdrop-filter: blur(10px);
5 border-radius: 16px;
6 border: 1px solid rgba(255, 255, 255, 0.3);
7 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
8}
9
10/* Dark glassmorphism */
11.glass-dark {
12 background: rgba(0, 0, 0, 0.4);
13 backdrop-filter: blur(10px) saturate(180%);
14 border: 1px solid rgba(255, 255, 255, 0.1);
15}
16
17/* Colored glass */
18.glass-blue {
19 background: rgba(59, 130, 246, 0.3);
20 backdrop-filter: blur(10px);
21 border: 1px solid rgba(59, 130, 246, 0.4);
22}
23
24/* Gradient glass */
25.glass-gradient {
26 background: linear-gradient(
27 135deg,
28 rgba(255, 255, 255, 0.4),
29 rgba(255, 255, 255, 0.1)
30 );
31 backdrop-filter: blur(10px);
32}Navigation Bar#
1/* Frosted nav bar */
2.navbar {
3 position: fixed;
4 top: 0;
5 left: 0;
6 right: 0;
7 height: 60px;
8 background: rgba(255, 255, 255, 0.8);
9 backdrop-filter: blur(20px) saturate(180%);
10 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
11 z-index: 1000;
12}
13
14/* Dark mode nav */
15.navbar-dark {
16 background: rgba(17, 24, 39, 0.8);
17 backdrop-filter: blur(20px);
18 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
19}
20
21/* macOS-style nav */
22.navbar-macos {
23 background: rgba(255, 255, 255, 0.72);
24 backdrop-filter: blur(20px) saturate(180%);
25}Modal and Overlay#
1/* Blurred modal backdrop */
2.modal-backdrop {
3 position: fixed;
4 inset: 0;
5 background: rgba(0, 0, 0, 0.4);
6 backdrop-filter: blur(4px);
7 display: flex;
8 align-items: center;
9 justify-content: center;
10}
11
12.modal {
13 background: white;
14 border-radius: 16px;
15 padding: 2rem;
16 max-width: 500px;
17 width: 90%;
18}
19
20/* Glass modal */
21.modal-glass {
22 background: rgba(255, 255, 255, 0.9);
23 backdrop-filter: blur(20px);
24 border: 1px solid rgba(255, 255, 255, 0.5);
25}
26
27/* Image overlay */
28.image-overlay {
29 position: relative;
30}
31
32.image-overlay::after {
33 content: '';
34 position: absolute;
35 bottom: 0;
36 left: 0;
37 right: 0;
38 height: 50%;
39 background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
40 backdrop-filter: blur(2px);
41}Cards and Panels#
1/* Floating card */
2.floating-card {
3 background: rgba(255, 255, 255, 0.7);
4 backdrop-filter: blur(10px);
5 border-radius: 20px;
6 padding: 24px;
7 box-shadow:
8 0 4px 30px rgba(0, 0, 0, 0.1),
9 inset 0 0 0 1px rgba(255, 255, 255, 0.5);
10}
11
12/* Stat card */
13.stat-card {
14 background: rgba(255, 255, 255, 0.25);
15 backdrop-filter: blur(4px);
16 border-radius: 12px;
17 padding: 16px;
18 border: 1px solid rgba(255, 255, 255, 0.3);
19}
20
21/* Sidebar panel */
22.sidebar {
23 position: fixed;
24 left: 0;
25 top: 0;
26 bottom: 0;
27 width: 280px;
28 background: rgba(255, 255, 255, 0.9);
29 backdrop-filter: blur(20px);
30 border-right: 1px solid rgba(0, 0, 0, 0.1);
31}Tooltips and Popovers#
1/* Glass tooltip */
2.tooltip {
3 position: absolute;
4 background: rgba(0, 0, 0, 0.75);
5 backdrop-filter: blur(8px);
6 color: white;
7 padding: 8px 12px;
8 border-radius: 8px;
9 font-size: 14px;
10 max-width: 200px;
11}
12
13/* Light tooltip */
14.tooltip-light {
15 background: rgba(255, 255, 255, 0.9);
16 backdrop-filter: blur(10px);
17 color: #333;
18 border: 1px solid rgba(0, 0, 0, 0.1);
19 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
20}
21
22/* Dropdown menu */
23.dropdown-menu {
24 background: rgba(255, 255, 255, 0.95);
25 backdrop-filter: blur(20px);
26 border-radius: 12px;
27 padding: 8px;
28 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
29 border: 1px solid rgba(0, 0, 0, 0.05);
30}Buttons#
1/* Glass button */
2.btn-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 padding: 12px 24px;
7 border-radius: 12px;
8 color: white;
9 cursor: pointer;
10 transition: all 0.3s ease;
11}
12
13.btn-glass:hover {
14 background: rgba(255, 255, 255, 0.3);
15 transform: translateY(-2px);
16}
17
18/* Frosted button */
19.btn-frosted {
20 background: rgba(255, 255, 255, 0.7);
21 backdrop-filter: blur(10px) saturate(180%);
22 border: none;
23 padding: 10px 20px;
24 border-radius: 8px;
25}Hero Sections#
1/* Hero with blurred image */
2.hero {
3 position: relative;
4 height: 100vh;
5 background-image: url('hero.jpg');
6 background-size: cover;
7}
8
9.hero-content {
10 position: relative;
11 z-index: 1;
12 background: rgba(255, 255, 255, 0.8);
13 backdrop-filter: blur(20px);
14 padding: 3rem;
15 border-radius: 20px;
16 max-width: 600px;
17 margin: auto;
18}
19
20/* Split hero */
21.hero-split {
22 display: grid;
23 grid-template-columns: 1fr 1fr;
24 min-height: 100vh;
25}
26
27.hero-text {
28 padding: 4rem;
29 background: rgba(255, 255, 255, 0.9);
30 backdrop-filter: blur(20px);
31}Animated Effects#
1/* Animated blur */
2.animated-blur {
3 backdrop-filter: blur(0px);
4 transition: backdrop-filter 0.3s ease;
5}
6
7.animated-blur:hover {
8 backdrop-filter: blur(10px);
9}
10
11/* Scroll-based blur (use with JS) */
12.scroll-blur {
13 --blur-amount: 0px;
14 backdrop-filter: blur(var(--blur-amount));
15 transition: backdrop-filter 0.1s ease;
16}
17
18/* Loading overlay */
19.loading-overlay {
20 backdrop-filter: blur(0px);
21 animation: blur-in 0.5s forwards;
22}
23
24@keyframes blur-in {
25 to {
26 backdrop-filter: blur(10px);
27 }
28}Browser Support#
1/* Feature detection */
2@supports (backdrop-filter: blur(10px)) {
3 .glass {
4 background: rgba(255, 255, 255, 0.5);
5 backdrop-filter: blur(10px);
6 }
7}
8
9@supports not (backdrop-filter: blur(10px)) {
10 .glass {
11 background: rgba(255, 255, 255, 0.95);
12 }
13}
14
15/* Fallback with regular filter */
16.glass {
17 background: rgba(255, 255, 255, 0.95); /* Fallback */
18}
19
20@supports (backdrop-filter: blur(10px)) {
21 .glass {
22 background: rgba(255, 255, 255, 0.5);
23 backdrop-filter: blur(10px);
24 }
25}
26
27/* WebKit prefix (Safari) */
28.glass {
29 -webkit-backdrop-filter: blur(10px);
30 backdrop-filter: blur(10px);
31}Performance Tips#
1/* Limit blur area */
2.small-blur-area {
3 backdrop-filter: blur(10px);
4 /* Keep element small when possible */
5}
6
7/* Use will-change for animations */
8.animated-glass {
9 will-change: backdrop-filter;
10 backdrop-filter: blur(10px);
11}
12
13/* Avoid on large areas */
14/* BAD: Full-screen blur */
15.full-page-blur {
16 position: fixed;
17 inset: 0;
18 backdrop-filter: blur(20px); /* Expensive! */
19}
20
21/* GOOD: Smaller contained blur */
22.header-blur {
23 height: 60px;
24 backdrop-filter: blur(10px);
25}
26
27/* Lower blur values are faster */
28.fast-blur {
29 backdrop-filter: blur(4px); /* Faster */
30}
31
32.slow-blur {
33 backdrop-filter: blur(20px); /* Slower */
34}Best Practices#
Design:
✓ Use subtle blur values (4-20px)
✓ Combine with semi-transparent background
✓ Add borders for definition
✓ Consider accessibility
Performance:
✓ Limit blur area size
✓ Use lower blur values
✓ Avoid animating blur
✓ Test on mobile devices
Fallbacks:
✓ Provide solid background fallback
✓ Use @supports for detection
✓ Include -webkit- prefix
✓ Test without backdrop-filter
Avoid:
✗ Large area blurs
✗ High blur values (>20px)
✗ Multiple overlapping blurs
✗ Blur on scrolling content
Conclusion#
backdrop-filter creates beautiful glass effects and blurred backgrounds. Use it for navigation bars, modals, cards, and tooltips. Keep performance in mind by limiting blur areas and values, and always provide fallbacks for unsupported browsers.