The filter property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

System Check

Which CSS property is used to apply graphical effects like blur?

effectfiltertransformgraphics

Community Design Lab

Share Filter Presets

Created a cool Instagram-like filter using CSS? Share your code snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Filter Property

Pascual Vila

Frontend Instructor.

The filter property in CSS is a powerful tool used to apply graphical effects like blurring or color shifting to an element. It is commonly used on images, backgrounds, and borders.

Common Filter Functions

The property accepts several functions:

blur(): Applies a Gaussian blur to the input image.
grayscale(): Converts the input image to grayscale.
brightness(): Applies a linear multiplier to the input image.
contrast(): Adjusts the contrast of the input.
drop-shadow(): Applies a drop shadow effect to the input image.

Combining Filters

You can apply multiple filters at once by separating them with spaces. For example: filter: grayscale(100%) blur(5px);. The order matters, as filters are applied sequentially.

Performance Note

While powerful, filters can be computationally expensive, especially on large images or when animating them. Use them judiciously to maintain smooth performance.

Filter Glossary

blur(px): Applies a Gaussian blur. Larger values create more blur. Negative values are not allowed.
grayscale(%): Converts image to black and white. 0% is original, 100% is fully grayscale.
hue-rotate(deg): Applies a hue rotation on the input image. The value is an angle around the color circle.
sepia(%): Converts the image to sepia (reddish-brown). 100% is completely sepia.
drop-shadow(): Similar to box-shadow, but applies to the actual shape of the element (e.g., transparent PNGs).

📖 INDEX

CSS Mastery

Concept 1: The Filter Property