CSS Text Shadow: Syntax, Usage, and Examples

The text-shadow property in CSS adds shadows to text, allowing you to create effects ranging from subtle depth to dramatic, glowing titles. Whether you’re going for a soft shadow, neon-style text, or layered design, CSS text shadow makes your typography more engaging and visually distinctive. It’s widely supported, easy to use, and gives you a creative tool to bring your words to life.

How to Use CSS Text Shadow

The syntax for text-shadow CSS is straightforward and flexible. At a minimum, it takes three values: horizontal offset, vertical offset, and blur radius. You can also add a color value.

selector {
  text-shadow: h-offset v-offset blur color;
}

Here’s a basic example:

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This applies a dark, blurred shadow to the text, giving it a soft, raised appearance. You can use pixels (px), em units, or even percentages, although pixels are most common for consistency.

When to Use Text Shadow CSS

Apply text shadows in CSS to make text stand out, improve contrast, or add a stylized effect. When done well, shadows enhance readability and design. When overused, they can make text harder to read.

Making Text Pop on Backgrounds

Text shadows can improve contrast when placed on busy or colorful backgrounds.

.hero-title {
  color: white;
  text-shadow: 1px 1px 3px black;
}

This makes white text easier to read on dark or patterned backgrounds.

Creating a Soft Glow

Use semi-transparent colors with larger blur values to simulate glow effects.

.glow {
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
}

This effect is popular for headings on dark themes or neon-style layouts.

Designing Drop Shadows for Titles

You can simulate a drop shadow look by using solid, sharp edges and no blur.

.shadowed-title {
  text-shadow: 3px 3px 0 #888;
}

This gives your headings more depth without making them blurry or hard to read.

Examples of CSS Text Shadow in Action

Simple Text Shadow

p {
  text-shadow: 1px 1px 2px gray;
}

Adds a subtle shadow for better legibility.

Multiple Shadows

You can layer multiple shadows by separating them with commas:

h2 {
  text-shadow:
    1px 1px 0 #000,
    2px 2px 2px #555;
}

This creates a stacked, dimensional effect that’s more visually dynamic.

CSS Drop Shadow Text for Emphasis

.feature-title {
  color: #333;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

A blurred shadow like this simulates depth and makes the text feel more interactive or elevated.

Colored Shadows for Style

.funky-heading {
  color: orange;
  text-shadow: 1px 1px 3px red;
}

This adds a bold and vibrant design touch, great for artistic or retro-themed pages.

Learn More About Text With Shadow CSS

Understanding Each Property

• Horizontal offset (required): Moves the shadow left or right. Negative values shift it left.
• Vertical offset (required): Moves the shadow up or down. Negative values shift it up.
• Blur radius (optional): Controls the softness of the shadow. A value of 0 creates a sharp edge.
• Color (optional but common): Defines the shadow color. You can use named colors, hex, rgb(), or rgba() for transparency.

Example:

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);

This adds a gentle, semi-transparent black shadow.

Background Shadow Text CSS Techniques

While text-shadow affects the text itself, you can also use background shadows for more dramatic effects. One trick is combining background gradients and shadows:

.fancy-text {
  color: white;
  background: linear-gradient(to right, #222, #000);
  text-shadow: 1px 1px 8px #000;
}

This makes the text glow against the dark background, perfect for spotlight-style designs.

CSS Inset Text Shadow?

CSS does not support true inset shadows for text the same way box-shadow supports inset box effects. But you can simulate an inset text effect using multiple shadows or clever layering:

.inset-look {
  color: #ccc;
  text-shadow:
    1px 1px 0 #fff,
   -1px -1px 0 #000;
}

This creates a beveled look, as if the text is carved into the background.

Creating Outlined Text with Text Shadow CSS

Want outlined letters? Use contrasting shadows on all sides:

.outlined-text {
  color: white;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

This outlines the text in black for a bold, readable effect.

Tools: CSS Text Shadow Generator

If you want to experiment without writing code manually, a CSS text shadow generator can help. These online tools let you:

• Adjust offsets, blur, and color
• Layer multiple shadows
• Copy/paste your code instantly

They’re great for quickly prototyping styles and fine-tuning your shadow combinations.

Popular tools include:

• CSS3 Text Shadow Generator by CSSMatic
• html-css-js.com text shadow tool
• EnjoyCSS

These save time and help you discover new shadow styles.

Using Text Shadow Responsibly

While text shadow CSS adds style and function, it’s important not to overdo it. Keep these best practices in mind:

• Use shadows to improve readability, not just to look flashy.
• Avoid using very large or dark shadows on small text.
• Make sure shadows contrast well with both the background and the text color.
• Test on different devices—some shadows may be too faint or too strong on certain screens.

CSS Custom Fonts and Shadow Pairing

When using custom fonts, shadows can either enhance or ruin the look. Pair shadows carefully with font weights and sizes. Thin fonts often benefit from a light, subtle shadow to add contrast. Thick or decorative fonts may look better with sharp, minimal shadows.

.custom-font {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

This preserves the font’s elegance while adding depth.

CSS Cursor and Shadow Combined

Some designers pair text shadows with cursor styles to add interactivity. For example:

.clickable-text {
  text-shadow: 1px 1px 2px #333;
  cursor: pointer;
}

This creates a subtle visual cue that something is interactive, without needing animations or hover states.

Using text-shadow in CSS lets you style typography in ways that are both beautiful and functional. Whether you’re going for a soft glow, a sharp drop shadow, or an inset look, the CSS text shadow property gives you full control over how text appears on the screen.