CSS Filter Examples

Let's have fun with CSS3 filters and show you some examples:

Base image

Base Image

Blur

Blur

.blur {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

Brightness

Brightness

.brightness {
  filter: brightness(0.9);
}

Contrast

Contrast

.contrast {
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}

Grayscale

Grayscale

.grayscale {
-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

Hue-rotate

Hue-rotate

.hue-rotate {
-webkit-filter: hue-rotate(185deg);
    filter: hue-rotate(185deg);
}

Invert

Invert

.invert {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

Saturate

Saturate

.saturate {
  -webkit-filter: saturate(200%);
          filter: saturate(200%);
}

Sepia

Sepia

.sepia {
  -webkit-filter: sepia(80%);
          filter: sepia(80%);
}

Multiple filters

You can combine multiple filters to create interesting effects:

Contrast + Grayscale

.multiple1 {
  -webkit-filter: contrast(1.9) grayscale(1);
  filter: contrast(1.9) grayscale(1);
}

Invert + Hue-rotate

.multiple2 {
  -webkit-filter: invert(90%) hue-rotate(175deg);
  filter: invert(90%) hue-rotate(175deg);
}

Brightness + Saturate + Contrast + Hue-rotate

.multiple3 {
  -webkit-filter: brightness(0.7) saturate(150%) contrast(190%) hue-rotate(30deg);
  filter: brightness(0.7) saturate(150%) contrast(190%) hue-rotate(30deg);
}
  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...