CSS AdvancedLesson 69Free preview

CSS Masking

This lesson is part of CSS · All levels

Summary

Masking allows us to hide some elements based on the image or gradient that the mask is made of. Solid areas of the mask show the elements, while transparent areas hide them. This technique is useful for creating unique shapes, fading edges, or grading effects on images and boxes.

Key points

`mask-image` determines the image or gradient used as the mask
`mask-size` and `mask-repeat` regulate the size and repetition of the mask
Choose the mask reading method: based on alpha or luminance
Vendor prefixes such as `-webkit-mask-*` are sometimes still required for compatibility

Full lesson

Code examples and quizzes

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