Prev Next

CSS Text Shadow

The text-shadow property adds shadows to text, creating depth and visual interest. You can control the shadow’s color, offset, and blur radius. Shadows can help text stand out from backgrounds, or achieve a stylistic, layered look.

Key Topics

Shadow Syntax

Use text-shadow: x-offset y-offset blur-radius color;. For example, text-shadow: 2px 2px 5px rgba(0,0,0,0.5);.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Shadow Example</title>
    <style>
        h1 {
            text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Shadowed Heading</h1>
    <p>The heading’s shadow gives it a subtle 3D effect.</p>
</body>
</html>

Explanation: A gentle blur and semi-transparent black shadow creates depth without overpowering the text.

Subtle vs. Bold Effects

Subtle shadows improve legibility, while bold, colorful shadows can achieve dramatic, artistic effects. Adjust offsets, blur, and colors to fit your design theme.

Key Takeaways

  • Depth: Add dimension to text with shadows.
  • Versatility: Experiment with offsets, blurs, and colors.
  • Subtlety: Keep shadows gentle for readability, or go bold for creative expression.
Prev Next