Filters

Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.

Note: The interactive widgets in this playground may be laggy due to the computation required to apply filter to elements.

Below, you can choose from a few images I’ve chosen.

Blur

blur() applies a Gaussian blur to the element. The length used determines the radius of the blur.

Filter

.image { filter: blur(0px); }

Brightness

brightness() modifies the brightness of the image. A value of 0.4 is equivalent to 40%.

Filter

.image { filter: brightness(0%); }

Contrast

contrast() changes the contrast of the image. This will typically change the color of the element. A value of 0.4 is equivalent to 40%.

Filter

.image { filter: contrast(0%); }

Drop Shadow

drop-shadow() applies a drop shadow onto the element. This is very similar to `box-shadow. I’ve chosen not to include the spread-radius value because some browsers will not render the shadow if there is a spread radius. Read more about it here.

Filter

.image { filter: drop-shadow(10px 10px 10px #194d33); }

Grayscale

grayscale() converts an image to grayscale. It basically turns the image black and white. Values between 0 to 100% are valid values. A value of 0.4 is equivalent to 40%.

Filter

.image { filter: grayscale(0%); }

Hue Rotate

hue-rotate() rotates the hue of the element. You can pass hue-rotate any normal angle value like 45deg or 3.14rad.

Filter

.image { filter: hue-rotate(0deg); }

Invert

invert() will invert the color within the element. A value of 0% produces an unchanged color and a value of 100% produces a completely inverted color. A value of 0.3 is equivalent to 30%.

Filter

.image { filter: invert(0%); }

Opacity

opacity() changes how opaque or transparent the image is. A value of 0% produces an invisible element and a value of 100% produces a visible element. A value of 0.3 is equivalent to 30%.

Filter

.image { filter: opacity(0%); }

Saturate

saturate() changes the saturation (amount of color). A value of 0.3 is equivalent to 30%.

Filter

.image { filter: saturate(0%); }

Sepia

sepia() turns the image into a sepia color (reddish-brown). A value of 0.3 is equivalent to 30%.

Filter

.image { filter: sepia(0%); }

Multiple filters

You can also apply multiple filters at the same time by adding multiple filter functions.

Filter

.image { filter: blur(0px) invert(0%); }

Conclusion

Filters are a great way apply image changes in browser without having to change the source image. If you’re interested in real documentation on filters, here is a link to the MDN documentation.

Hopefully this is a good tool for anyone curious about CSS filters. If you found this useful, feel free to share it with others.

HTML
CSS
Output