DEV Community

loading...
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 (https://unsplash.com/photos/hFXZ5cNfkOk) ))

filter: blur(10px)
Blurs the image. The higher the pixel count, the more blurry the image.
Screen-Shot-2019-09-16-at-1-26-01-AM

filter: brightness(30%)
The higher the percentage, the brighter the image.
Screen-Shot-2019-09-16-at-1-30-59-AM

filter: contrast(150%)
The higher the percentage, the higher the contrast.
Screen-Shot-2019-09-16-at-1-35-45-AM

filter: grayscale(50%)
The closer to 100% you go, the more gray the image will be.
Screen-Shot-2019-09-16-at-1-39-17-AM

filter: sepia(75%)
Likewise, higher the number, the more sepia will be in the image.
Screen-Shot-2019-09-16-at-1-41-03-AM

filter: hue-rotate(180deg)
This one is interesting. You can go up to 360deg (no change). You can even animate with these.
Screen-Shot-2019-09-16-at-1-44-26-AM

filter: invert(80%)
At 50% the image turns gray, the more above 50 you go, the more inverted the image and vice versa.
Screen-Shot-2019-09-16-at-1-46-33-AM

filter: opacity(50%)
100% opacity is completely visible.
Screen-Shot-2019-09-16-at-1-48-22-AM

filter: saturate(200%)
Screen-Shot-2019-09-16-at-1-50-23-AM

You can even layer them,
filter: saturate(120%) contrast(110%) hue-rotate(80deg) sepia(10%);
Screen-Shot-2019-09-16-at-2-00-50-AM

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)