CSS AdvancedLesson 65Free preview

CSS Image Filters

This lesson is part of CSS · All levels

Summary

The `filter` property allows us to apply visual effects directly to images or other elements, such as blurring, darkening, illuminating, or turning them black and white. This effect rendered the browser so that no additional image files were needed. Filters can even be animated with `transition` for interesting interactions.

Key points

The following general filter functions: `blur()`, `brightness()`, `contrast()`, `grayscale()`, `sepia()`
Turn the picture completely black and white
Suitable for shadows that follow a transparent image
It makes the effect change smoothly, for example when hover

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.