Effects

filter

filter applies image effects such as blur, brightness, and hue rotation to everything an element draws, children included. List several functions separated by spaces.

Syntaxnone | <filter-value-list> …

none | <filter-value-list>

<filter-value-list> = [ <filter-function> | <url> ]+
<filter-function> = <blur()> | <brightness()> | <contrast()>
  | <drop-shadow()> | <grayscale()> | <hue-rotate()>
  | <invert()> | <opacity()> | <saturate()> | <sepia()>

Preview

Presets

Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  border-radius: 24px;
  filter: hue-rotate(90deg) drop-shadow(0 8px 12px #0f172a40);
}

Controls

hue-rotate(90deg)

<angle>

drop-shadow(0 8px 12px #0f172a40)

offset-x

offset-y

blur-radius

color

Add a function

About

The functions

blur() blurs. The radius is a length; % is not allowed.
brightness(), contrast(), and saturate() leave the image as is at 1 (100%), weaken it below, and strengthen it above.
grayscale(), sepia(), invert(), and opacity() take an amount from 0 to 1 (0% to 100%). Anything above 1 counts as 1.
hue-rotate() turns the hue by an angle; 360deg comes full circle.
With no argument, blur() uses 0, hue-rotate() uses 0deg, and the rest use 1. So grayscale() and friends apply at full strength when the argument is left out.

Applied in order

Functions apply from left to right. Adding a shadow and then going grayscale (drop-shadow(0 8px 12px red) grayscale(1)) turns the shadow gray too, while the reverse order keeps it red. Reorder the cards in the controls to see it.

drop-shadow() vs. box-shadow

drop-shadow() follows the shape of the drawn pixels, so it hugs images with transparency and cut-out shapes. Unlike box-shadow, it has no spread and no inset. Change the background in the code to radial-gradient(circle, #77a7d7 40%, transparent 41%) and the shadow follows the circle.

Watch out

Any value other than none makes the element a new stacking context and the containing block for position: fixed descendants. If a fixed modal suddenly moves, check its ancestors for filter.
To blur what is behind an element, use backdrop-filter instead of filter.

References

MDN Web Docsfilter SpecificationFilter Effects Module Level 1 Can I usefilter