Everything You Need to Know About CSS Filters

CSS filters open up creative possibilities by allowing you to apply visual effects like blurring, brightness adjustments, saturation changes, and more to HTML elements with just a few lines of code. These filters give developers powerful tools to add appealing visual styles without extra images or graphics.

In this article, we’ll explore what CSS filters are, review the different types available, see examples, and also look at browser support and fallback options. Read on to learn how to use these eye-catching effects!

What Are CSS Filters?

CSS filters provide a way to apply common visual effects to elements without needing extra images or SVG graphics. They work by modifying the pixel values of an element before it is rendered on the page.

Some common uses of CSS filters include:

• Blurring or sharpening details
• Adjusting brightness, contrast or saturation
• Hue rotation or color shifting
• Opacity and transparency changes
• Image grayscale or sepia effects

CSS filters can be used creatively to achieve many different visual styles. Subtle uses can improve accessibility while bolder effects add intrigue and vibrancy.

CSS Filter Functions

CSS filters are applied using the filter property and value. The value takes one or more filter functions such as blur() or saturate().

Here are some of the most useful CSS filter functions:

Blur Filter

The blur() filter function applies a Gaussian blur effect to an element. A larger value increases the blur intensity.

img {
  filter: blur(4px);
}

Grayscale Filter

The grayscale() filter renders an element in black and white. A value of 100% is completely grayscale.

img {
  filter: grayscale(80%); 
}

Sepia Filter

The sepia() filter gives an element a classic sepia tone like an antique photograph.

img {
  filter: sepia(60%);
}

Saturate Filter

The saturate() filter alters an element's color saturation. Values over 100% supersaturate colors.

img {
  filter: saturate(150%);
}

Hue Rotate Filter

The hue-rotate() filter applies a hue rotation effect, shifting colors around the color wheel by a specified number of degrees.

img {
  filter: hue-rotate(90deg);
}

Brightness Filter

The brightness() filter makes an element appear brighter or darker. Values over 100% increase brightness.

img {
  filter: brightness(150%);
}

Contrast Filter

The contrast() filter adjusts the contrast of an element's colors. Values over 100% increase contrast.

img {
  filter: contrast(175%);
}

Invert Filter

The invert() filter inverts the colors of an element. A value of 100% is fully inverted.

img {
  filter: invert(75%);
}

Opacity Filter

The opacity() filter makes an element transparent. This is often preferable to using the opacity property.

img {
  filter: opacity(50%); 
}

Combining Filters

Multiple CSS filter functions can be combined by spacing them out within the same filter property value:

img {
  filter: blur(2px) brightness(150%) hue-rotate(90deg);
}

This allows creating complex visual effects by chaining and blending filters.

CSS Filter Examples

Let’s look at some examples applying these filters to images:

Blur Effect

This progressively blurs an image on hover:

img {
  transition: filter 0.5s;
}
img:hover {
  filter: blur(5px); 
}

Demo blur effect

Vintage Effect

This achieves a vintage, faded film look using grayscale and sepia:

img {
  filter: grayscale(80%) sepia(50%);
}

Demo vintage effect

Duotone Effect

This creates a pink and blue duotone effect by shifting hues:

img {
  filter: hue-rotate(125deg) saturate(2);
}

Demo duotone effect

Inverted Effect

This inverts and reduces brightness for an eerie effect:

img {
  filter: brightness(50%) invert(100%);
}

Demo inverted effect

As you can see, CSS filters open up many possibilities for unique styles and effects!

Browser Support

CSS filters have widespread browser support, but there are some caveats:

• Safari has almost full support, but lacks hue-rotate()
• IE11 and legacy Edge do not support filters
• Partial support in Opera Mini

To handle lack of support in IE11/Edge, using a polyfill like postcss-filters-ie is recommended.

For image effects, also providing a fallback img for IE11/legacy Edge is advised:

img {
  filter: grayscale(100%); 
}
/* Fallback */
img:not([src$=".svg"]) {  
  background: url(grayscale-image.jpg);
}

This will use the grayscale image as a fallback when filters aren’t supported.

Use Cases for CSS Filters

There’s many creative ways filters can enhance interfaces and visuals:

• Subtle filters can improve accessibility by adjusting contrast or brightness.
• Hover effects like blurs or saturation changes add interactivity.
• Vintage filters give a nostalgic, aged aesthetic.
• Duotones make striking accent colors.
• Image transitions can smoothly crossfade between filters.
• Loading states benefit from blurring or grayscale filters.

By applying CSS filters creatively, you can add beautiful visual styles and effects while maintaining performance.

Key Takeaways

• CSS filters provide effects like blur, brightness, saturation without extra images.
• Common filters include grayscale, sepia, hue-rotate, invert, opacity, etc.
• Multiple filters can be combined for creative effects.
• Support is good but polyfills help handle older browsers.
• Filters open many possibilities for improving accessibility, visuals and interactivity.

CSS filters are a fun way to add impressive visuals to your web pages and apps. With these simple functions, the possibilities are endless!