filter

The filter property specifies visual effects that are added to an element.

Syntax

Example:

img.ex {
  filter: grayscale(80%);
}

Values

none
Default value. No effects are applied.

blur(px)
Adds a blur effect, where the higher the value, the more blur is added.

brightness(%)
Changes the brightness of the element, where 0% is totally black, 100% is default and represents the original brightness, and anything over 100% produces increased brightness.

contrast(%)
Changes the contrast of the element, where 0% is totally black, 100% is default and represents the original contrast, and anything over 100% produces increased contrast.

drop-shadow(h-shadow v-shadow blur spread color)
Adds a drop-shadow effect to the element.

Possible values:

h-shadow (Required) Designates a value in pixels for the horizontal shadow, with negative values placing the shadow to the element’s left.

v-shadow (Required) Designates a value in pixels for the horizontal shadow, with negative values placing the shadow to the element’s left.

blur (Optional) Designates a value in pixels that adds a blur effect to the shadow. A larger value creates more blur, no value – or 0 – gives the shadow a sharp edge.

spread (Optional) Designates a value in pixels that, when positive, will cause the expansion and growth of the shadow, and, when negative, will cause it to shrink.

color (Optional) Gives the shadow a color. If not specified the color is determined by the browser (often black).

grayscale(%)
Converts the element to grayscale, with 0% (default) representing the original color scale, and 100% making the element completely gray (black and white).

hue-rotate(deg)
Adds a hue-rotation to the element, with the value being the number of degrees around the color circle the image samples will be changed. 0deg is the default, representing the original version, and 360deg is the maximum.

invert(%)
Inverts the samples in the element, with 0% (default) representing the original element, and 100% making the element completely inverted.

opacity(%)
Designates the opacity level of the element, with 100% (default) representing the original element, and 100% making the element completely transparent.

saturate(%)
Designates the saturation level of the element, with 100% (default) representing the original element, and 100% making the element completely un-saturated.

sepia(%)
Converts the element to sepia, with 0% (default) representing the original element, and 100% making the element completely sepia.

url()
The location of an XML file that provides an SVG filter. It may also include an anchor to a specific filter element.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of filter? Submit a codepen.io demo and we'll showcase it here ↴