CSS · Chapter 38 of 44
CSS Shadows
box-shadow adds a shadow effect around an element's frame, while text-shadow adds a shadow behind text. Both accept horizontal/vertical offsets, blur radius, and color.
Multiple shadows can be layered by separating them with commas, useful for depth effects.
Syntax
box-shadow: offsetX offsetY blur color;
text-shadow: offsetX offsetY blur color;box-shadow
box-shadow: offsetX offsetY blur spread color; adds depth to boxes. The optional inset keyword creates an inner shadow instead of an outer one.
text-shadow
text-shadow: offsetX offsetY blur color; adds a shadow behind text characters, useful for readability over busy backgrounds.
Example 1 (css)
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
h1 {
text-shadow: 2px 2px 4px gray;
}Output
A card with a soft drop shadow, and a heading with a subtle gray shadow behind the textbox-shadow adds depth to the card; text-shadow adds a soft shadow behind the heading text.
Key points
- box-shadow adds a shadow around an element's box.
- text-shadow adds a shadow behind text.
- Shadow syntax: offsetX offsetY blur (spread) color.
- The inset keyword flips box-shadow to appear inside the element.
💡 Note: Multiple comma-separated shadows can be layered for richer depth effects.