What does text-shadow do? Give an example.

Q: What does text-shadow do? Give an example.

`text-shadow` adds a shadow effect to text, giving depth or emphasis. You can control the horizontal and vertical offsets, blur radius, and shadow color. `text-shadow: h-offset v-offset blur-radius color;` – Basic syntax where: h-offset: horizontal displacement of the shadow (positive = right, negative = left). v-offset: vertical displacement (positive = down, negative = up). blur-radius: optional, makes the shadow softer (default 0). color: color of the shadow. .text-box { font-size: 24px; color: black; text-shadow: 2px 2px 5px gray; background-color: lightyellow; padding: 10px; } In this example, the text shadow is offset 2px to the right and 2px down, with a blur of 5px in gray. This creates a subtle shadow effect behind the text. .text-box { font-size: 32px; color: white; text-shadow: 2px 2px 2px black, -2px -2px 2px red; background-color: darkblue; padding: 10px; } You can apply multiple shadows by separating them with commas. Each shadow can have different offsets, blur, and color for creative effects. `text-shadow` enhances text appearance and improves readability against backgrounds. Use subtle shadows for a professional look; avoid excessive shadows that reduce readability. Multiple shadows can be layered for 3D or glowing effects. Works with headings, buttons, and decorative text for UI enhancement.

Difficulty: 4/10

CSS styling, visual effects, design systems

Using text-shadow in CSS

text-shadow adds a shadow effect to text, giving depth or emphasis. You can control the horizontal and vertical offsets, blur radius, and shadow color.

Syntax of text-shadow

1
text-shadow: h-offset v-offset blur-radius color; – Basic syntax where:
2
h-offset: horizontal displacement of the shadow (positive = right, negative = left).
3
v-offset: vertical displacement (positive = down, negative = up).
4
blur-radius: optional, makes the shadow softer (default 0).
5
color: color of the shadow.

Example: Simple Text Shadow

In this example, the text shadow is offset 2px to the right and 2px down, with a blur of 5px in gray. This creates a subtle shadow effect behind the text.

Example: Multiple Shadows

You can apply multiple shadows by separating them with commas. Each shadow can have different offsets, blur, and color for creative effects.

Key Takeaways

1
text-shadow enhances text appearance and improves readability against backgrounds.
2
Use subtle shadows for a professional look; avoid excessive shadows that reduce readability.
3
Multiple shadows can be layered for 3D or glowing effects.
4
Works with headings, buttons, and decorative text for UI enhancement.

Scenario Questions

0-2 years experience

Follow-up Questions