W3.CSSLesson 52Free preview

W3.CSS Filters

This lesson is part of W3.CSS · All levels

Summary

CSS filters change the visual appearance of an image or element, such as removing color or adding blur. The property filter accepts functions such as grayscale(), blur(), brightness(), and sepia() that can be written in style inline or in custom CSS. The result is just changing the display on the screen, the original file doesn't change.

Key points

Filter functions: grayscale, blur, brightness, contrast, sepia, invert, saturate, hue-rotate
It produces a total black and white appearance
Filters are applied via inline style or CSS rules themselves
The image files on the server are unchanged, only the rendering changes
Combine with:hover for a before-and-after comparison effect

Full lesson

Code examples and quizzes

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