DEV Community

Cover image for CSS Filters are neat

CSS Filters are neat

Nicholas Kolodziej
・3 min read

This weekend I discovered the greatness that are CSS Filters.

CSS Filters are visual effects - not unlike photoshop filters - for your browser. Check these options out:

  • blur
  • brightness
  • contrast
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia
  • url (SVG filters)

Lets go through them by testing the filters on this royalty free image!
Ahh, the Rialto Bridge in Venezia, Italy.
(( @Damiano Baschiera ( ))

filter: blur(10px)
Blurs the image. The higher the pixel count, the more blurry the image.

filter: brightness(30%)
The higher the percentage, the brighter the image.

filter: contrast(150%)
The higher the percentage, the higher the contrast.

filter: grayscale(50%)
The closer to 100% you go, the more gray the image will be.

filter: sepia(75%)
Likewise, higher the number, the more sepia will be in the image.

filter: hue-rotate(180deg)
This one is interesting. You can go up to 360deg (no change). You can even animate with these.

filter: invert(80%)
At 50% the image turns gray, the more above 50 you go, the more inverted the image and vice versa.

filter: opacity(50%)
100% opacity is completely visible.

filter: saturate(200%)

You can even layer them,
filter: saturate(120%) contrast(110%) hue-rotate(80deg) sepia(10%);

Add some to your galleries, options to edit images, hover effects, animated effects and more. These filters are powerful and built right into css.

Discussion (0)