CSS Filter Property

The filter property applies visual effects like brightness, blur, and grayscale to an element.

brightness()

Makes an element brighter or darker. 1 is normal, above 1 is brighter, below 1 is darker.

.hex:hover {
  filter: brightness(1.3);  /* 30% brighter */
}

.disabled {
  filter: brightness(0.5);  /* 50% darker */
}

blur()

Applies a blur effect. The value is the blur radius in pixels.

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

grayscale()

Converts to grayscale. 0 is normal, 1 is fully gray.

.inactive {
  filter: grayscale(1);  /* fully gray */
}

opacity()

Makes an element transparent. 1 is fully visible, 0 is invisible.

.faded {
  filter: opacity(0.5);  /* 50% transparent */
}

saturate()

Controls color intensity. 1 is normal, above 1 is more vivid, below 1 is more muted.

.vivid {
  filter: saturate(2);  /* double saturation */
}

drop-shadow()

Adds a shadow that follows the shape of the element (works great with SVGs and PNGs with transparency).

.icon {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

Combining filters

You can chain multiple filters in one declaration:

.selected {
  filter: brightness(1.2) saturate(1.5);
}