CSS Visual ToolsLesson 71Free preview

Box Shadow Generator

This lesson is part of Web Developer Tools · All levels

Summary

Box shadow generators help create shadows around elements by setting offsets, blur, spread, and colors. You can add some layers of shadow or use insets for effects inside the element. This tool accelerates the value experiment until the shadow display feels right.

Key points

The box-shadow sequence is offset-x, offset-y, blur, spread, then color.
Positive offsets shift the shadow to the right and down
Blur makes the edges of the shadow softer, spreading the shadow larger or smaller
The inset keyword puts the shadow inside the element
Some shadows are separated by a comma and drawn from the front

Full lesson

Code examples and quizzes

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