CSS Text Shadow: Complete Guide, Syntax & Examples

CSS Text Shadow

CSS text-shadow is a CSS property used to add a shadow effect behind text. It can make headings, labels, buttons, navigation items, and other text elements stand out visually without requiring images or additional HTML elements.

A well-designed text shadow can add depth, improve visual hierarchy, and create effects such as soft shadows, glowing text, embossed text, outlined text, and even retro or neon-style typography. However, shadows should be used carefully because excessive effects can make text harder to read.

The text-shadow property works with almost any text-containing HTML element, including headings, paragraphs, links, buttons, and spans.

Basic Syntax

The basic syntax of text-shadow is:

selector {
    text-shadow: horizontal-offset vertical-offset blur-radius color;
}

For example:

h2 {
    text-shadow: 2px 2px 4px #999;
}

This creates a shadow that is moved 2 pixels to the right and 2 pixels downward, with a 4-pixel blur.

The four commonly used values are:

• Horizontal offset — controls the shadow’s horizontal position.
• Vertical offset — controls the shadow’s vertical position.
• Blur radius — controls how soft or sharp the shadow appears.
• Color — defines the shadow color.

The blur radius is optional, and the color can also be omitted because browsers can use the element’s current text color in that case.

A Simple Text Shadow

The simplest useful example is:

p {
    text-shadow: 2px 2px #888;
}

Here, the shadow moves 2 pixels horizontally and 2 pixels vertically.

Because no blur radius is specified, the shadow has a relatively sharp appearance.

Understanding Horizontal Offset

The first length controls the horizontal offset.

h2 {
    text-shadow: 5px 0 #999;
}

A positive value moves the shadow to the right.

A negative value moves it to the left:

h2 {
    text-shadow: -5px 0 #999;
}

A value of 0 keeps the shadow aligned horizontally with the text:

h2 {
    text-shadow: 0 0 5px #999;
}

Understanding Vertical Offset

The second length controls the vertical position of the shadow.

h2 {
    text-shadow: 0 5px #999;
}

The shadow moves downward.

A negative value moves it upward:

h2 {
    text-shadow: 0 -5px #999;
}

Combining horizontal and vertical offsets allows you to control the direction of the shadow precisely.

Understanding Blur Radius

The third value controls how much the shadow is blurred.

For example:

h2 {
    text-shadow: 3px 3px 8px #777;
}

A larger blur radius produces a softer shadow.

A smaller blur radius produces a sharper shadow.

Compare these examples:

/* Sharp */
text-shadow: 2px 2px 1px #777;
/* Medium */
text-shadow: 2px 2px 5px #777;
/* Soft */
text-shadow: 2px 2px 12px #777;

The blur radius cannot be negative.

Understanding Shadow Color

The final value specifies the shadow’s color.

h2 {
    text-shadow: 2px 2px 5px black;
}

You can use different CSS color formats, including named colors, hexadecimal values, RGB, RGBA, HSL, and HSLA.

For example:

h2 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Using transparency is often preferable because a semi-transparent shadow tends to look more natural than a completely opaque shadow.

Using RGBA for Softer Shadows

A common approach is to use a partially transparent black shadow:

.card-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

The fourth value in rgba() controls opacity.

For example:

rgba(0, 0, 0, 0.2)

creates a subtle shadow, while:

rgba(0, 0, 0, 0.8)

creates a much stronger shadow.

Multiple Text Shadows

One of the most powerful features of text-shadow is the ability to apply multiple shadows to the same text.

Separate each shadow with a comma:

h1 {
    text-shadow:
        2px 2px 3px #999,
        -2px -2px 3px #fff;
}

The browser renders the shadows together, producing a layered effect.

Multiple shadows can be used to create sophisticated typography without additional elements.

Text Glow Effect

You can create a glowing effect by using zero offsets and a large blur radius:

.glow {
    color: white;
    text-shadow: 0 0 10px #00ffff;
}

A stronger glow can be created with multiple shadows:

.glow {
    color: white;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff;
}

This technique is commonly used for futuristic interfaces, gaming websites, event pages, and decorative headings.

Neon Text Effect

Multiple colored shadows can create a neon-style effect:

.neon {
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff;
}

The text itself remains white while the surrounding glow provides the neon appearance.

Creating a Drop Shadow Effect

A traditional drop shadow can be created with a horizontal and vertical offset:

.title {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

This is useful when you want text to appear slightly raised above a background.

Creating a Hard Shadow

If you want a bold graphic appearance, use little or no blur:

.title {
    text-shadow: 4px 4px 0 #222;
}

The 0 blur value produces a sharp shadow.

This style is useful for:

• Posters
• Children’s websites
• Gaming designs
• Retro interfaces
• Decorative headings
• Illustrative typography

Creating a Retro Text Effect

A layered shadow can produce a retro or offset-print appearance:

.retro {
    color: #222;
    text-shadow:
        3px 3px 0 #f00,
        6px 6px 0 #00f;
}

Because the shadows are sharp and offset, the result resembles layered printed colors.

Creating an Embossed Effect

A combination of light and dark shadows can create an embossed appearance:

.embossed {
    color: #777;
    text-shadow:
        1px 1px 0 #fff,
        -1px -1px 0 #333;
}

The light and dark edges create an illusion of depth.

This effect should be used sparingly because modern interface design generally favors simpler typography.

Creating an Outline-Like Text Effect

CSS does not provide a true text outline through text-shadow, but multiple shadows can approximate one.

For example:

.outline {
    color: white;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

This places shadows around the text’s edges.

For a true text stroke, CSS also provides the non-standard -webkit-text-stroke property, which may be more appropriate when supported by the target browsers.

Using CSS Variables with Text Shadow

CSS custom properties make shadow styles easier to maintain.

:root {
    --text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
}
.title {
    text-shadow: var(--text-shadow);
}

You can then reuse the same shadow throughout a website.

For example:

.card-title,
.hero-title,
.section-title {
    text-shadow: var(--text-shadow);
}

This keeps your stylesheet more consistent and easier to update.

Text Shadow with Hover Effects

Text shadows can be combined with pseudo-classes such as :hover.

a {
    color: #222;
    text-shadow: none;
    transition: text-shadow 0.2s ease;
}
a:hover {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

The shadow appears smoothly when the user moves the pointer over the link.

Text Shadow Transitions

The text-shadow property can be animated using CSS transitions.

.title {
    text-shadow: 0 0 0 transparent;
    transition: text-shadow 0.3s ease;
}
.title:hover {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

Transitions are useful for interactive interfaces, but decorative animations should not interfere with readability.

Animated Text Shadows

You can also animate a text shadow using @keyframes.

.glowing-text {
    color: white;
    animation: glow 2s infinite alternate;
}
@keyframes glow {
    from {
        text-shadow: 0 0 5px #00ffff;
    }
    to {
        text-shadow:
            0 0 10px #00ffff,
            0 0 20px #00ffff;
    }
}

For users who prefer reduced motion, consider respecting the prefers-reduced-motion media feature:

@media (prefers-reduced-motion: reduce) {
    .glowing-text {
        animation: none;
    }
}

Using Text Shadow on Headings

Text shadows are most commonly used on headings because headings are naturally designed to attract attention.

h2 {
    color: #222;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

However, not every heading needs a shadow. A clean heading with good font size, weight, spacing, and contrast is often more readable than one with a strong decorative effect.

Text Shadow on Paragraphs

Technically, you can apply text-shadow to paragraphs:

p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

But this is usually unnecessary.

Large amounts of body text should generally remain simple and highly readable. Strong shadows can make letters appear blurry, particularly at small font sizes.

Text Shadow on Buttons

Text shadows can be useful for buttons with a decorative or three-dimensional style:

button {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

For modern UI design, keep the shadow subtle.

Text Shadow on Links

You can use shadows on links, but make sure the effect does not make the link difficult to distinguish from surrounding text.

a {
    color: #0645ad;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Color, underline, focus indicators, and other visual cues should still make links identifiable.

Text Shadow on Images

If text is positioned over an image, a subtle text shadow can improve readability.

.hero-title {
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

This is particularly useful when the image contains areas with varying brightness.

However, a text shadow should not be used as the only solution when text contrast is poor. A darker overlay, gradient, or different text placement may provide a better result.

Text Shadow and Accessibility

Accessibility should always be considered when using text effects.

A shadow does not automatically improve text contrast. In some cases, a heavy shadow can actually reduce readability.

For important content:

• Use sufficient text-to-background contrast.
• Avoid excessive blur.
• Do not rely on shadows alone to communicate meaning.
• Keep body text relatively simple.
• Maintain visible keyboard focus indicators.
• Test text over images at different screen sizes.
• Consider users with visual impairments.
• Avoid rapidly changing or distracting text effects.

The purpose of a text shadow should normally be enhancement, not compensation for poor design.

Text Shadow vs Box Shadow

text-shadow and box-shadow may sound similar, but they serve different purposes.

text-shadow applies a shadow effect to text glyphs:

h2 {
    text-shadow: 2px 2px 5px #777;
}

box-shadow applies a shadow around an element’s box:

.card {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

A card might use box-shadow, while the heading inside the card could independently use text-shadow.

Text Shadow vs Filter Drop Shadow

CSS also provides the filter property with drop-shadow().

For example:

.logo {
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4));
}

text-shadow is designed specifically for text. filter: drop-shadow() works with the rendered shape of an element and can therefore be useful for images, transparent graphics, and other shapes.

The none Value

You can remove a text shadow by setting:

text-shadow: none;

This is useful when overriding a style from another stylesheet or removing an effect at a particular breakpoint.

For example:

.title {
    text-shadow: 2px 2px 5px #777;
}
@media (max-width: 600px) {
    .title {
        text-shadow: none;
    }
}

Responsive Text Shadows

Text shadows should also be considered in responsive design.

A shadow that looks attractive on a large heading may look too strong when the same heading becomes smaller on a mobile screen.

You can adjust the shadow at smaller screen sizes:

.hero-title {
    font-size: 3rem;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    }
}

Common Mistakes When Using Text Shadow

One of the most common mistakes is using a shadow that is too dark.

For example:

h1 {
    text-shadow: 8px 8px 15px black;
}

This may look excessive and can make the heading appear blurry.

A more subtle approach is often better:

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

Another mistake is applying strong shadows to every element. If everything has a shadow, nothing stands out.

It is usually better to reserve strong effects for specific visual elements.

Another Common Mistake: Poor Contrast

Adding a shadow does not guarantee good readability.

For example, white text over a bright image may remain difficult to read even with a small shadow.

Instead, consider combining the text shadow with an overlay:

.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url("hero.jpg") center / cover;
}

Then use a subtle shadow:

.hero-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

Another Common Mistake: Too Many Shadows

Multiple shadows are powerful, but adding too many layers can create a cluttered result.

For example:

.title {
    text-shadow:
        1px 1px 2px red,
        2px 2px 3px blue,
        3px 3px 4px green,
        4px 4px 5px yellow,
        5px 5px 6px purple;
}

Although technically valid, this can quickly become visually confusing.

Use multiple shadows intentionally and test the result on different displays.

Browser Compatibility

text-shadow is a well-established CSS feature and is supported by modern browsers, including current versions of Chrome, Edge, Firefox, Safari, and other mainstream browsers.

For most modern websites, you can use text-shadow directly without browser-specific prefixes.

As always, test important visual designs in the browsers and devices that your audience uses.

Complete Practical Example

Here is a simple example combining several concepts:

<h2 class="title">Learn CSS Text Shadow</h2>
<p class="description">
    Add subtle depth and visual emphasis to your text with CSS.
</p>

.title {
    color: #222;
    font-size: 2.5rem;
    text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.25);
}
.description {
    color: #555;
}

The heading receives a subtle shadow while the paragraph remains clean and easy to read.

Advanced Layered Example

A more decorative example can use multiple shadows:

.fancy-title {
    color: white;
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #bbb,
        0 3px 0 #aaa,
        0 4px 6px rgba(0, 0, 0, 0.35);
}

This creates a layered three-dimensional appearance.

Text Shadow with CSS clamp()

Responsive typography can be combined with responsive shadow values.

.hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3);
}

The font size changes according to the viewport, while the shadow remains subtle and consistent.

Performance Considerations

A simple text shadow generally has little impact on modern devices.

However, large blur radii, many simultaneous shadows, and animated effects can increase rendering work.

For example:

text-shadow:
    0 0 20px red,
    0 0 40px red,
    0 0 60px red,
    0 0 80px red;

Using many large blurred shadows across many elements can be more expensive than a simple shadow.

For normal website content, a small number of subtle shadows is usually the better approach.

Best Practices for CSS Text Shadow

For professional websites, follow these principles:

1. Keep shadows subtle for normal interface text.
2. Use transparency when appropriate instead of solid black.
3. Avoid shadows on large amounts of body text.
4. Use multiple shadows only when they serve a clear visual purpose.
5. Check text contrast independently of the shadow.
6. Test designs on mobile screens.
7. Avoid excessive blur.
8. Use CSS variables for reusable shadow styles.
9. Use transitions and animations sparingly.
10. Respect reduced-motion preferences for animated effects.
11. Do not use shadows as a replacement for good typography.
12. Test the final design on different backgrounds and displays.

Quick Reference

The most important forms of text-shadow are:

/* No shadow */
text-shadow: none;
/* Offset shadow */
text-shadow: 2px 2px #777;
/* Blurred shadow */
text-shadow: 2px 2px 5px #777;
/* Transparent shadow */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
/* Glow */
text-shadow: 0 0 10px #00ffff;
/* Multiple shadows */
text-shadow:
    1px 1px 3px #000,
    0 0 10px #00ffff;

Frequently Asked Questions

What is text-shadow in CSS?

text-shadow is a CSS property that adds one or more shadows behind text.

What is the syntax of text-shadow?

The common syntax is:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Is the blur radius required?

No. The blur radius is optional. If it is omitted, the shadow has no blur.

Can CSS have multiple text shadows?

Yes. Multiple shadows can be separated by commas.

text-shadow:
    2px 2px 3px #000,
    0 0 10px #0ff;

Can text-shadow create a glow?

Yes. A glow can be created by using zero offsets and a blur radius, often combined with multiple shadows.

Can text shadow be animated?

Yes. text-shadow can be used with CSS transitions and animations.

Does text-shadow work on paragraphs?

Yes. It can be applied to paragraphs, but strong shadows are generally better suited to headings and decorative text because excessive effects can reduce readability.

What is the difference between text-shadow and box-shadow?

text-shadow creates shadows around text glyphs, while box-shadow creates shadows around an element’s box.

Can text shadow improve accessibility?

A subtle shadow can sometimes help text stand out from a background, but it should not be relied upon as a substitute for adequate contrast and accessible typography.

Can I use transparent colors with text-shadow?

Yes. Using rgba() or another color format with transparency is a common way to create softer and more natural-looking shadows.

Can I remove a text shadow?

Yes. Use:

text-shadow: none;

Final Thoughts

CSS text-shadow is a simple property with surprisingly broad creative possibilities. With just a few values, you can create subtle depth, soft shadows, glowing text, neon effects, retro typography, embossed designs, and layered visual effects.

The key to using it effectively is restraint. A small, well-positioned shadow can make text feel polished without distracting from the content. On the other hand, excessive blur, strong colors, and too many shadow layers can quickly make a design look cluttered.

For most websites, the best approach is to start with a subtle shadow, check readability and contrast, and increase the effect only when the design genuinely benefits from it. When used thoughtfully alongside good typography, spacing, color, and responsive design, text-shadow can be a useful finishing touch for modern CSS interfaces.