CSS Filter
Tags: css, cssfilter, filter
Published: 2020-08-28 08:42:02

---
title: CSS Filter
published: true
description: CSS filter values, areas of use, browser support and more.
tags: css, cssfilter, filter
series: CSS Special Effects
cover_image: https://redonion.se/img/devto/cover-filter-devto.png
canonical_url: https://redonion.se/en/css-filters/
---
Use filters to add effects to single elements. Filters share the same syntax and options as backdrop-filter.

Just as with backdrop-filter, it is possible to use more than one filter on an element by adding additional filters:
`filter: blur(5px) hue-rotate(90deg);`

![Examples of different filter effects applied to a photo.](https://redonion.se/wp-content/uploads/2020/08/influencer-instagram-filters2.gif)<figcaption>Examples of different filter effects applied to a photo.</figcaption>

<hr>

###CSS Filter Values
- **Blur:** applies a Gaussian blur and works similar to blurring effects in graphical software programs. Takes a length value. Increasing the value increases the blurring effect. Example: `filter: blur(5px);`
- **Brightness:** Takes a number or percentage value. `filter: brightness(100%)` or `brightness(1)` is the normal brightness. Values below 100% or 1 will make the element darker, and values above 100% or 1 will make the element brighter.
- **Contrast:** takes a number or percentage value, where `filter: contrast(100%)` or `contrast(1)` is the starting point resulting in an unaltered element. Increasing the value means increasing the contrast.
- **Drop-shadow:** takes 3 length values controlling offset-x, offset-y, and blur-radius (in that order), and a color at the end. Example: `filter: drop-shadow(2px 3px 4px black);` Compared to `box-shadow`, `drop-shadow` can provide hardware acceleration for some browsers, resulting in slightly better performance. The most important benefit however, is that `drop-shadow` has the ability to restrict the shadow to follow the edges of the visible element rather than the edges of its bounding box. The effect can be applied to for example SVGs, images, linear backgrounds as well as clipped or masked elements. See [“Drop-shadow the underrated CSS filter”](https://css-irl.info/drop-shadow-the-underrated-css-filter/) by M. Barker for examples.
- **Grayscale:** takes a number or percentage value. Any number above 100% or 1 leads to a complete black-and-white result. 0 or 0% means no black-and-white filtering is applied, and anywhere from 0 or 0% to 1 or 100% means applying a partial black-and-white filter.
- **Hue-rotate:** takes an angle that represents how much the hue should change. Example: `backdrop-filter: hue-rotate(45deg);` Degree values range from 0 to 360, where 0 is red, 120 is green and 240 is blue. Negative values or values above 360 are also accepted, although since the values represent degrees around the color circle those numbers will have equivalents within the range 0 to 360.
- **Invert:** takes a number or percentage. 0 or 0% means no effect is applied. 1 and 100% means a totally inverted effect.
- **Opacity:** takes a number or percentage between 0 to 1 and 0 to 100%. When using opacity with filter instead of the usual opacity property, some browsers can benefit from hardware acceleration for better performance.
- **Sepia:** takes a number or percentage between 0 to 1 and 0 to 100%, where a lower number indicates a fainter sepia-tone level.
- **Saturate:** takes a number or percentage, where a lower number means lower saturation and a higher number increases saturation. 1 or 100% is the starting point resulting in an unchanged element.
- **None, inherit, initial, unset:** There are also the values `none`, `inherit`, `initial`, and `unset` to control inheritance, reset or remove any existing setting.
- **SVG filters:** use your own SVG filter for a custom effect. Example: `filter: url(filters.svg#filter);` There is [a bug](https://bugs.chromium.org/p/chromium/issues/detail?id=109212) that prevents linking to external SVG file filters in Chrome. Even though linking to external SVG file filters might work at some point in the future, the recommendation is to link to filters in the same HTML document using inline styles. Another alternative to avoid using inline styles in the HTML document is to just reference the SVG filter ID (which still has to be placed in the HTML file) in the CSS file: `filter: url(#duotone);`

<hr>

###Browser Compatibility
[Filter effects](https://caniuse.com/#feat=css-filters) are (at the time of writing) supported in 96% of all browsers globally. It is not supported in Internet Explorer or Opera Mini.

Using [filter effects on SVG objects](https://caniuse.com/#feat=svg-filters) has a global compatibility percentage of 98%, including support in Internet Explorer 10 and 11.

###Filter Online Tools
[CSSfilters.co](https://www.cssfilters.co/), is a website where users can upload photos and recreate Instagram filters using presets from [CSSGram](https://una.im/CSSgram/).

[RGBA to feColorMatrix](http://andresgalante.com/RGBAtoFeColorMatrix/) is a website where users can create their own SVG filters based on RGBA colors.