In CSS, the text-shadow property is used to add shadow effects to text. You can apply multiple shadows to text by separating each shadow effect with a comma. The text-shadow property accepts values for the horizontal offset, vertical offset, blur radius, and color of the shadow.
Syntax:
text-shadow: horizontal-offset vertical-offset blur-radius color;
Examples:
1. Basic Text Shadow:
p {
text-shadow: 2px 2px 4px #000000;
}
Explanations of above example:
2px: Horizontal offset (moves the shadow 2 pixels to the right)2px: Vertical offset (moves the shadow 2 pixels down)4px: Blur radius (the amount of blur applied to the shadow)#000000: Shadow color (black)
2. Multiple Text Shadows:
h1 {
text-shadow: 1px 1px 2px #ff0000, 2px 2px 4px #00ff00, 3px 3px 6px #0000ff;
}
This applies three separate shadows to the text, each with different offsets, blur radii, and colors.
3. Inset Shadow: Although text-shadow does not directly support inset shadows (like box-shadow does), you can achieve similar effects with clever use of offsets and colors.
h2 {
text-shadow: -1px -1px 0 #ff0000, 1px 1px 0 #00ff00;
}