Text
text-shadow
text-shadow casts shadows that follow the shape of the text. Separate several shadows with commas to layer them.
Syntax
none | <shadow-t>#
<shadow-t> = [ <length>{2} <length [0,∞]>? ] && <color>?Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
text-shadow: 2px 4px 6px #0f172a40;
}Controls
Shadow 1
offset-x
offset-y
blur-radius
color
About
The three lengths
- The first two are the horizontal and vertical offsets. Positive values move the shadow right and down.
- The third is the blur radius. Larger values spread the shadow wider and lighter; negative values are not allowed. It defaults to
0(a sharp shadow).
Unlike box-shadow, there is no spread radius and no inset. To make text look bolder, stack shadows nudged slightly in each direction (see the Outline preset).
Color and stacking
Without a color you get currentcolor (the text color). With multiple shadows, the first one is drawn on top, and all of them sit below the text itself. Stacking shadows offset 1px at a time gives an extruded, 3D look.
Inheritance and layout
text-shadow is inherited. Set it on a parent and every piece of text inside gets the shadow, so use text-shadow: none on a child to opt out. Shadows don’t affect layout, and they also apply to lines drawn by text-decoration, such as underlines.