CSS Filters

CSS Filters

CSS filters apply graphical effects to an element before it is displayed. The filter property can blur an element, adjust its brightness or contrast, change its colors, alter its opacity, create a drop shadow, and combine multiple effects.

Filters are commonly applied to images, but they can also affect other rendered elements and their contents.

How Filters Work

The filter property accepts one or more filter functions. Each function describes a graphical operation that is applied to the rendered element.

.image {
  filter: grayscale(100%);
}

This example removes the color from the rendered image, producing a grayscale effect.

The initial value of filter is none, which means no filter effects are applied.

.image {
  filter: none;
}

blur()

The blur() function applies a Gaussian blur to the element.

.image {
  filter: blur(4px);
}

A larger length produces a stronger blur. A value of 0 leaves the element unchanged.

The blur can extend beyond the original edges of the rendered content, so nearby content and clipping should be considered when using stronger blur effects.

brightness()

The brightness() function adjusts the brightness of an element.

.image {
  filter: brightness(150%);
}

A value of 100% leaves the element unchanged. Values below 100% darken it, while values above 100% brighten it.

.image {
  filter: brightness(60%);
}

contrast()

The contrast() function adjusts the difference between lighter and darker areas.

.image {
  filter: contrast(150%);
}

A value of 100% leaves the element unchanged. Lower values reduce contrast, while higher values increase it.

.image {
  filter: contrast(50%);
}

grayscale()

The grayscale() function converts colors toward shades of gray.

.image {
  filter: grayscale(100%);
}

A value of 0% leaves the original colors unchanged. A value of 100% produces a fully grayscale result. Intermediate values create a partial grayscale effect.

.image {
  filter: grayscale(50%);
}

hue-rotate()

The hue-rotate() function rotates the colors of an element around the color wheel.

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

The function accepts an angle. A value of 0deg leaves the colors unchanged, while other angles shift the hues.

Angle units such as deg, rad, grad, and turn can be used.

invert()

The invert() function reverses the colors of an element by an amount specified with a number or percentage.

.image {
  filter: invert(100%);
}

A value of 0% leaves the element unchanged. A value of 100% produces a fully inverted result.

.image {
  filter: invert(50%);
}

opacity()

The opacity() filter function changes the transparency of the rendered element.

.image {
  filter: opacity(50%);
}

A value of 100% leaves the element fully opaque, while 0% makes it fully transparent.

This function produces a visual result similar to the CSS opacity property, although the filter function participates in the filter effect chain.

saturate()

The saturate() function changes the intensity of an element's colors.

.image {
  filter: saturate(200%);
}

A value of 100% leaves the colors unchanged. Values below 100% reduce saturation, while values above 100% increase it.

.image {
  filter: saturate(40%);
}

sepia()

The sepia() function converts colors toward a warm sepia appearance.

.image {
  filter: sepia(100%);
}

A value of 0% leaves the element unchanged, while 100% applies the full sepia conversion.

.image {
  filter: sepia(50%);
}

drop-shadow()

The drop-shadow() function draws a shadow based on the rendered shape of an element.

.image {
  filter: drop-shadow(6px 6px 5px #666);
}

The values specify the horizontal offset, vertical offset, blur radius, and shadow color.

Unlike a typical box-shadow, a filtered drop shadow can follow the visible shape and transparency of rendered content. This can be especially useful for transparent images.

Multiple Filters

Multiple filter functions can be applied in a single filter declaration by separating them with spaces.

.image {
  filter: brightness(120%) contrast(110%) saturate(130%);
}

The functions are applied in the order they are written. Because the result of one filter becomes the input to the next filter, changing their order can change the final appearance.

.first {
  filter: sepia(100%) hue-rotate(90deg);
}
.second {
  filter: hue-rotate(90deg) sepia(100%);
}

These two declarations use the same functions but can produce different results.

Filters and Transitions

Filter effects can be combined with CSS transitions to create gradual visual changes between filter values.

.image {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.image:hover {
  filter: grayscale(0%);
}

The image begins in grayscale and gradually returns to full color when the pointer moves over it.

Transitions can also be used with brightness, contrast, blur, saturation, and other filter functions when their values can be interpolated.

CSS Filter Functions

CSS Filter Example

The following example applies several different filter functions to copies of the same image so their effects can be compared.

.grayscale {
  filter: grayscale(100%);
}
.blur {
  filter: blur(3px);
}
.brightness {
  filter: brightness(150%);
}
.sepia {
  filter: sepia(100%);
}

Open the example in the editor and change the values to compare different filter strengths. You can also place multiple filter functions in the same declaration to combine effects.