Filters and backdrop-filter: Visual Effects in CSS
8 min read
Applying Image-Processing Effects with CSS
The filter property applies graphical effects — blur, brightness, contrast, grayscale, and more — directly to an element and its contents. backdrop-filter applies the same effects to whatever is behind the element, enabling glass-morphism UIs.
css
/* filter — affects the element itself */
.grayscale-img {
filter: grayscale(100%);
transition: filter 300ms ease;
}
.grayscale-img:hover {
filter: grayscale(0%);
}
/* Combine multiple filter functions */
.dramatic {
filter:
contrast(1.3)
brightness(1.1)
saturate(1.5)
hue-rotate(15deg);
}
/* Soft drop shadow (respects alpha channel, unlike box-shadow) */
.logo-png {
filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.5));
}
/* Blur an element */
.blurred {
filter: blur(8px);
}backdrop-filter: frosted glass
css
/* Glassmorphism card — blurs content behind the card */
.glass-card {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
padding: 2rem;
/* The magic: blur whatever is behind this element */
backdrop-filter: blur(16px) saturate(1.8);
-webkit-backdrop-filter: blur(16px) saturate(1.8);
}
/* Sticky nav with glass effect */
.nav-glass {
position: sticky;
top: 0;
background: rgba(15, 15, 26, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}backdrop-filter requires the parent to have a background with some transparency (not background: none or fully opaque). Always include the -webkit-backdrop-filter fallback for Safari. Heavy blur values can impact GPU performance on low-end devices.
Ready to test yourself?
Practice CSS— quiz & coding exercises