Filters in CSS cheat sheet

Filters in CSS are commonly used to adjust the rendering of images, backgrounds, and borders. With filters, you can make a picture grayscale, increase the contrast, make it blur, add shadow, or completely invert the colors. Here is a little downloadable and a printable cheat sheet with CSS filters.

Download PNG

filter: none

filter: blur(10px)

filter: contrast(300%)

filter: brightness(0.7)

filter: grayscale(100%)

filter: hue-rotate(70deg)

filter: opacity(30%)

filter: invert(90%)

filter: sepia(70%)

filter: saturate(70%)

filter: drop-shadow(.5rem .5rem .1rem #64005A)