← Back home

CSS visual reference

Backdrop filters

backdrop-filter changes whatever is visible behind an element. Each glass panel below uses the same background artwork, so you can compare the effects directly.

Aa

blur()

blur(12px)

Softens everything behind the panel.

Aa

brightness()

brightness(1.6)

Makes the backdrop lighter or darker.

Aa

contrast()

contrast(1.8)

Increases or reduces tonal separation.

Aa

grayscale()

grayscale(1)

Removes color from the backdrop.

Aa

hue-rotate()

hue-rotate(120deg)

Rotates every backdrop color around the color wheel.

Aa

invert()

invert(1)

Reverses the backdrop colors.

Aa

opacity()

opacity(.35)

Changes the opacity of the filtered backdrop image.

Aa

saturate()

saturate(2.5)

Intensifies or mutes backdrop colors.

Aa

sepia()

sepia(1)

Adds a warm, antique color treatment.

Aa

drop-shadow()

drop-shadow(8px 8px 5px #172554)

Adds a shadow based on shapes in the backdrop.

Filters can be combined

A practical glass effect

Separate functions with spaces. Order can affect the result, so experiment when stacking them. 

backdrop-filter:
  blur(18px)
  saturate(1.5)
  brightness(1.08);
Combined filterFrosted glass

The content stays crisp while the scene behind it is softened and enriched.