Filter Preview
The CSS filter property applies graphical effects — blur, brightness, contrast, color shifts and more — directly to any HTML element. It works on images, text, backgrounds, divs and SVGs. Filters are GPU-accelerated in all modern browsers, making them fast enough for hover animations and transitions.
Use the generator above to combine multiple filter functions visually and copy the CSS instantly.
filter: blur(4px); /* Gaussian blur */ filter: brightness(1.2); /* 0=black, 1=normal, >1=brighter */ filter: contrast(1.5); /* 0=grey, 1=normal, >1=more contrast */ filter: grayscale(1); /* 0=color, 1=fully greyscale */ filter: hue-rotate(90deg); /* Shift hue on color wheel */ filter: invert(1); /* 0=normal, 1=fully inverted */ filter: opacity(0.5); /* Same as opacity property */ filter: saturate(2); /* 0=greyscale, 1=normal, >1=vivid */ filter: sepia(0.8); /* 0=normal, 1=full sepia tone */ /* Combine multiple filters */ filter: brightness(1.1) contrast(1.2) saturate(1.3);
filter applies effects to the element itself and everything inside it. backdrop-filter applies effects to whatever is rendered behind the element — this is what powers glassmorphism effects. The element must be at least partially transparent for backdrop-filter to be visible.
/* Blurs the element and its contents */ filter: blur(8px); /* Blurs only what's behind the element */ backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.1);
Image hover effects — Desaturate images at rest and restore color on hover for a sleek gallery effect.
.gallery-img {
filter: grayscale(1) brightness(0.9);
transition: filter 0.3s ease;
}
.gallery-img:hover {
filter: grayscale(0) brightness(1);
}
Dark mode image toning — Slightly reduce brightness and adjust hue on images in dark mode so they don't appear too harsh.
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0.85) contrast(1.05);
}
}
Blurred background overlay — Create depth in modals and sidebars by blurring the page content behind them.
.page-content.modal-open {
filter: blur(4px) brightness(0.7);
transition: filter 0.3s ease;
}
Drop shadow on transparent images — Unlike box-shadow, filter: drop-shadow() follows the actual shape of a PNG with transparency.
.png-icon {
/* Hugs the shape, ignores transparent areas */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
Most filter functions are animatable. Use transition: filter for hover effects and @keyframes for looping animations. For best performance, avoid animating blur() on large elements — it is GPU-intensive. Prefer animating brightness(), saturate() or opacity() for smoother results on mobile.
.card {
filter: brightness(1);
transition: filter 0.25s ease;
}
.card:hover {
filter: brightness(1.15) saturate(1.2);
}
The filter property is supported everywhere. backdrop-filter needed a webkit prefix in older Safari but is now standard.
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| filter | 18+ | 35+ | 9.1+ | 12+ |
| backdrop-filter | 76+ | 103+ | 9+ (-webkit-) | 79+ |
| filter animation | 53+ | 52+ | 9.1+ | 79+ |
Apply filter: blur(8px) to the <img> element. Increase the pixel value for stronger blur. To blur on hover, use transition: filter 0.3s ease and filter: blur(0) on the hover state. Note that blur slightly enlarges the visible footprint — wrap the image in an element with overflow: hidden to clip the bleed.
filter applies effects to the element itself (the image, text, or box). backdrop-filter applies effects to whatever is rendered behind the element, visible through its transparent area. Use filter to blur an image; use backdrop-filter to create a frosted-glass panel. Need glass? Our Glassmorphism Generator handles this automatically.
Yes. Filters apply left to right. filter: blur(4px) brightness(1.5) blurs first then brightens the result, while filter: brightness(1.5) blur(4px) brightens then blurs. The visual difference is small for subtle values but pronounced for heavy ones.
Any non-zero filter creates a new stacking context and triggers GPU rasterization, which can resample text. Avoid applying filters to elements containing text. If you must, set backface-visibility: hidden and transform: translateZ(0) on the parent to stabilize sub-pixel rendering.
Use filter: grayscale(100%). Combine with filter: grayscale(100%) contrast(1.1) for a richer, deeper black-and-white look. Toggle to color on hover with :hover { filter: grayscale(0); } and a transition.
Yes — filters are GPU-accelerated and fast for hover states, transitions and one-off effects. Avoid animating blur() with large radii on full-screen elements; the per-frame rasterization is expensive. Animate opacity or transform in parallel for smooth results.
Need a frosted glass panel? Our Glassmorphism Generator combines backdrop-filter with the right transparency settings automatically.