CSS Filters

The filter property applies graphical effects like blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow. Filters can be chained and transition smoothly for hover/focus effects.

1) Individual Filters


.img:hover { filter: blur(3px); }
.img:hover { filter: brightness(1.35); }
.img:hover { filter: contrast(1.35); }
.img:hover { filter: grayscale(1); }
.img:hover { filter: hue-rotate(120deg); }
.img:hover { filter: invert(1); }
.img:hover { filter: saturate(1.8); }
.img:hover { filter: sepia(1); }
.img:hover { filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
saturate()
sepia()
drop-shadow()

Hover tiles to preview each filter effect.

2) Chaining Filters


.img:hover{
  filter: saturate(1.6) hue-rotate(25deg) contrast(1.1) brightness(1.05);
}
chained

Order matters: effects are applied left → right.

3) backdrop-filter (“Glassmorphism”)


.glass{
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

Glass Card

Background content gets blurred through this layer.

Requires a non-fully-opaque background; support varies on older browsers.

4) SVG Filters (Advanced)


<filter id="gooey">
  <feGaussianBlur in="SourceGraphic" stdDeviation=6 />
  <feColorMatrix mode="matrix" values="...matrix..." />
</filter>

SVG filters are powerful (e.g., gooey, turbulence, displacement). Apply via filter: url(#id) on SVG content.

Best Practices:

  • Use filters on small/medium elements for best performance; heavy blur on large layers can be costly.
  • Animate filter sparingly; prefer opacity/transform for frequent transitions.
  • For background blurs, use backdrop-filter with a translucent background.
  • Chain thoughtfully; the order of filters affects color and look.
  • Consider fallbacks for browsers without backdrop-filter support.