In this article
CSS Filter Property Explained
The CSS filter property applies graphical effects like blur, brightness, contrast, and color shifts to any HTML element. It works on images, backgrounds, text, and even entire sections of a page. Filters are processed by the browser's GPU, making them efficient for real-time visual effects without needing image editing software.
CSS provides nine built-in filter functions: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. These can be chained together in a single filter declaration to create complex visual effects. The order of filters matters — each function processes the output of the previous one.
How Each Filter Function Works
Each filter function takes a single value and transforms the element's visual output. Understanding what each function does helps you combine them effectively for the look you want.
- blur(px) — applies a Gaussian blur effect, making the element appear out of focus. Higher values create a stronger blur. Useful for background overlays and frosted glass effects
- brightness(%) and contrast(%) — brightness scales the overall lightness (100% is unchanged, 200% is double), while contrast adjusts the difference between light and dark areas. Together they control the image's tonal range
- grayscale(%), sepia(%), and hue-rotate(deg) — grayscale removes color saturation, sepia adds a warm brownish tone, and hue-rotate shifts all colors around the color wheel by the specified degrees
Try it free — no signup required
Generate CSS Filters →Creating Instagram-Style Effects
By stacking multiple CSS filter functions, you can recreate popular photo filter effects entirely in code. These effects apply in real time and work on any image element without modifying the source file.
- Vintage look — combine sepia(60%) with contrast(110%) and brightness(90%) to create a warm, faded photograph effect reminiscent of old film cameras
- Black and white — use grayscale(100%) with contrast(120%) for a high-contrast monochrome effect. Add brightness(110%) for a brighter, cleaner black-and-white look
- Dramatic mood — stack contrast(150%) with saturate(130%) and brightness(80%) for a vivid, darkened atmosphere that makes colors pop against deep shadows
Frequently Asked Questions
Can I use SVG filters with the CSS filter property?
Yes. The url() function within CSS filter lets you reference custom SVG filter definitions for effects beyond the built-in functions. This enables advanced effects like displacement maps, color matrices, and custom convolution kernels. However, SVG filters are more complex to create and have slightly lower browser support than the built-in CSS filter functions.
Do CSS filters affect performance?
CSS filters are GPU-accelerated in modern browsers, making them efficient for most use cases. Single filters on images have minimal performance impact. However, applying blur to large areas, animating multiple filters simultaneously, or using filters on elements with complex layouts can cause frame drops on lower-powered devices. Test on mobile before shipping.
Can filters be animated on hover?
Yes. CSS filters work seamlessly with transitions and animations. A common pattern is applying a grayscale or blur filter by default and transitioning to the original look on hover. For example: filter: grayscale(100%); transition: filter 0.3s; with :hover setting filter: none. This creates smooth, GPU-accelerated hover effects.