CSS filter

<!DOCTYPE html>
<title>Example</title>
<style>
div {
  width: 200px;
  margin: 0 15px;
  float: left;
}
.filtered {
  filter: hue-rotate(180deg) drop-shadow(10px 10px 10px gray);
}
</style>

<div>
Original Image:
<img src="/pix/samples/8m.jpg" alt="Sample image">
</div>

<div>
Filtered Image:
<img src="/pix/samples/8m.jpg" alt="Sample image" class="filtered">
</div>

The CSS filter property provides graphical filter effects to HTML elements.

The filter property enables you to apply effects to images and other elements that have traditionally been the domain of desktop photo editors. For example, you can adjust the contrast or brightness of an image, turn a color photo into a "black and white" photo, blur the image, adjust the hue, invert the colors, etc.

Syntax

Where

Where

Possible Values

Here are the possible values:

A filter reference to a <filter> element. For example url(filters.svg#filter). A filter is only applied if the filter references a filter element, otherwise the whole filter chain is ignored and no filter is applied to the object.

blur( <length> )

Applies a Gaussian blur to the element. The passed parameter provides the radius of the blur. The parameter can be a CSS length, but not a percentage value.

Negative values are not allowed.

brightness( [ <number> | <percentage> ] )

Adjusts the brightness of the element based on the value provided. A value of 0% results in an element that is completely black. A value of 100% leaves the element unchanged. To make the element brighter, use an amount greater than 100%.

Negative values are not allowed.

contrast( [ <number> | <percentage> ] )

Adjusts the contrast of the element based on the value provided. A value of 0% results in an element that is completely gray. A value of 100% leaves the input unchanged. To increase the contrast, use an amount greater than 100%.

Negative values are not allowed.

drop-shadow( <horizontal-offset> <vertical-offset> <blur> <color> )

Applies a drop shadow to the element. Values are as follows:

<horizontal-offset> (required): The first value determines the horizontal offset of the drop shadow. It is a length value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn to the left of the box. If it is a positive value, it will be drawn to the right.
<vertical-offset> (required): The second value determines the vertical offset of the drop shadow. It is a length value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn above the box. If it is a positive value, it will be drawn below.
<blur> (optional): The third value determines the Gaussian blur effect (if any). If the value is zero (i.e. 0), the edge of the shadow will be sharp. The higher the value, the more blurred the shadow will become. Negative values are not allowed for a Gaussian blur.
<color> (optional): The fifth value determines the color of the drop shadow. For example, steelblue, #FF4500 or rgba(0,0,0,0.3) are all valid colors. If this value isn't provided, the value will be taken from the color property.

grayscale( [ <number> | <percentage> ] )

Converts the element to grayscale. The passed parameter defines to what degree the element is converted to grayscale. A value of 100% is completely grayscale. A value of 0% leaves the element unchanged.

Negative values are not allowed.

hue-rotate( <angle> )

Applies a hue rotation to the element. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the element unchanged.

invert( [ <number> | <percentage> ] )

Inverts the samples in the element. The passed parameter defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the element unchanged.

Negative values are not allowed.

opacity( [ <number> | <percentage> ] )

Applies transparency to the samples in the element. The passed parameter defines the proportion of the conversion. A value of 100% is completely transparent. A value of 0% leaves the element unchanged.

Negative values are not allowed.

This function is similar to the opacity property but it is not meant to be a shorthand for that property. Using filters may result in slightly better performance on some browsers. However, the two can be combined, resulting in a more transparent element.

saturate( [ <number> | <percentage> ] )

Saturates the element. Saturation is the colorfulness of a color relative to its own brightness. The passed parameter defines the proportion of the conversion. A value of 100% is completely un-saturated. A value of 0% leaves the element unchanged.

Negative values are not allowed.

sepia( [ <number> | <percentage> ] )

Converts the element to sepia. Sepia toning provides a reddish brown monochrome tint. It can give photos a warm, antique feeling. The passed parameter defines the proportion of the conversion. A value of 100% is completely un-saturated. A value of 0% leaves the element unchanged.

Negative values are not allowed.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value: none
Applies To: All elements. When used with Scalable Vector Graphics (SVG), it applies to container elements without the <defs> element and all graphics elements.
Inherited?: No
Media: Visual
Animatable: Yes (see example)

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

The filter property is defined in Filter Effects Module Level 1 (W3C Working Draft, 25 November 2014).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.