MoreLesson 204Free preview

Cutout Text

This lesson is part of How To · All levels

Summary

Cutout text is the effect of text that appears to be hollow so that the image or gradient behind it is visible through the letters. This effect is created by background-clip: text and color: transparent, then the background image is positioned on the text element. A thin edge can be added to keep the letters readable when the background is bright.

Key points

Background-clip: text makes the background only visible in the letter area
Color: transparent open a 'hole' to allow the background to penetrate the text
Include prefixes -webkit- for broader browser compatibility
Add text strokes or thin shadows to keep the letters clear

Full lesson

Code examples and quizzes

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