CSS Visual ToolsLesson 78Free preview

Filter Generator

This lesson is part of Web Developer Tools · All levels

Summary

Filter generators create visual effects such as blur, brightness, contrast, grayscale, and drop shadow through the CSS filter properties. Several functions can be combined into a single declaration and changed as the hover. The filter effect is processed by the browser, so use enough to keep the performance good.

Key points

Filter receives one or more functions separated by spaces
Blur using a unit of length like px
Turning the elements into black and white
The brightness above 1 makes the image brighter
Drop-shadow follows the shape of the content, unlike box-shadow

Full lesson

Code examples and quizzes

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