CSS Visual ToolsLesson 76Free preview

Text Shadow

This lesson is part of Web Developer Tools · All levels

Summary

Text shadow generators create shadows on text by setting offsets, blur, and colors. Several layers of shadow can be combined for glow, emboss, or layered shadow effects. Use the effects carefully to keep the contrast and readability of the text alive.

Key points

The text-shadow sequence is offset-x, offset-y, blur, then color.
Offset determines the direction and distance of the shadow of the text
Blur 0 produces shadows with sharp edges
Some shadows are separated by commas and stacked in sequence
Keep text contrasted against the background so that the effect does not interfere with the readability

Full lesson

Code examples and quizzes

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