CSS Filters

CSS Filters

Make photos Instagram-worthy without an editor: blur, brightness, grayscale, and more.

The filter property

Apply visual effects to an element filter: effect(value);. Combine with spaces:

img {
  filter: grayscale(100%);           /* black & white */
  filter: blur(5px);                  /* soft focus */
  filter: brightness(80%);            /* darker */
  filter: brightness(1.5);             /* brighter */
  filter: contrast(1.4);               /* more contrast */
  filter: sepia(60%);                  /* vintage */
  filter: hue-rotate(90deg);           /* shift colors */
  filter: saturate(2);                 /* punchy colors */
  filter: invert(1);                   /* negative */
  filter: opacity(0.5);                /* translucent */
  filter: drop-shadow(2px 4px 6px gray); /* shadow follows shape */
}

Combining effects

Separate effects with spaces:

img {
  filter: grayscale(100%) brightness(1.2);
}

Filters on anything

Not just images! Apply to backgrounds, text wrappers, even whole sections:

.card:hover {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.3));
}

Difference from box-shadow

• box-shadow makes a shadow of the rectangular box.
• filter: drop-shadow() makes a shadow of the actual shape (great for PNGs and transparent letters).

TL;DR

• filter: = grayscale, blur, brightness, contrast, sepia, hue-rotate...
• Chain filters with spaces.
• drop-shadow follows the real shape.
• Great for hover effects and camera-like edits.