CSS Filter

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.

---

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” 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 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);

---

Browser Compatibility

Filter effects 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 has a global compatibility percentage of 98%, including support in Internet Explorer 10 and 11.

Filter Online Tools

CSSfilters.co, is a website where users can upload photos and recreate Instagram filters using presets from CSSGram.

RGBA to feColorMatrix is a website where users can create their own SVG filters based on RGBA colors.