CSS text-shadow

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;
}

CSS text-shadow – Interview Questions

Q 1: What is text-shadow?

Ans: It adds shadow effect to text.

Q 2: Syntax of text-shadow?

Ans: text-shadow: 2px 2px 5px gray;

Q 3: Can multiple shadows be added?

Ans: Yes, separated by commas.

Q 4: Is text-shadow supported in all browsers?

Ans: Yes, in modern browsers.

Q 5: Can text-shadow improve readability?

Ans: Yes, especially on images.