CSS Shadows
CSS shadows add visual depth to elements. The box-shadow property applies to boxes, while text-shadow applies to text. These can be used to highlight content and create stylish designs.
Simple box-shadow example
In the following example, we add a shadow to a box that is offset to the right and downward with a slight blur. The shadow color is semi-transparent black.
The example shows the basic usage of the box-shadow property.
Box-shadow syntax
Box-shadow consists of several parameters: horizontal offset, vertical offset, blur, spread, and color. By combining these, different effects can be achieved.
| Parameter | Description |
|---|---|
| h-offset | The horizontal offset of the shadow. |
| v-offset | The vertical offset of the shadow. |
| blur-radius | The blur radius of the shadow. |
| spread-radius | The spread radius of the shadow. |
| color | The color of the shadow. |
Tips for using shadows
Use shadows carefully so they create a natural effect and do not harm readability.
- Use subtle shadows for a natural look.
- Combine multiple shadows on one element for a deeper effect.
- Do not overuse shadows, as they can reduce the clarity of the design.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
