CSS - Filters

Play with the slider to change filter strength and see how each of them interact with the RGB circles.

None

filter: none

Blur

filter: blur(25px)

Brightness

filter: brightness(50%)

Contrast

filter: contrast(50%)

Grayscale

filter: grayscale(50%)

Hue-rotate

filter: hue-rotate(180deg)

Invert

filter: invert(50%)

Opacity

filter: opacity(50%)

Saturate

filter: staturate(50%)

Sepia

filter: sepia(50%)

Drop-shadow

filter: drop-shadow(0px 0px 10px #000000)