CSS Filters Demo

Hover over an element to apply the filter

grayscale(100%)

Takes out the colors

sepia(100%)

Makes colors brown

hue-rotate(180deg)

Turns the color wheel

invert(100%)

Inverts the colors

brightness(50%)

Adds brightness

contrast(150%)

Makes darks darker and brights brighter

blur(5px)

Blurs the element

saturate(180%)

Makes colors brighter

drop-shadow(0px 5px 10px black)

Adds a drop shadow

opacity(0.5)

Makes the element transparent