text-shadow

Definition

The text-shadow CSS property is used to apply a shadow effect to text. It allows you to add a visual shadow behind text elements, enhancing their visibility and creating a stylistic effect.

The text-shadow property accepts one or more values:

A color value specifies the color of the shadow. This can be a named color (e.g., red, blue), a hexadecimal value (e.g., #ff0000, #00bfff), an RGB value (e.g., rgb(255, 0, 0)), or an RGBA value (e.g., rgba(0, 0, 255, 0.5)).
An optional horizontal offset value defines the distance the shadow is offset horizontally from the text. Positive values move the shadow to the right, while negative values move it to the left.
An optional vertical offset value defines the distance the shadow is offset vertically from the text. Positive values move the shadow downwards, while negative values move it upwards.
An optional blur radius value controls the blurriness of the shadow. Higher values create a more spread-out and blurry shadow, while lower values create a sharper shadow.
Multiple shadows can be specified by separating them with commas.

Here’s an example:

.heading {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

In this example, the .heading class applies a text shadow with a horizontal offset of 2 pixels, a vertical offset of 2 pixels, and a blur radius of 4 pixels. The shadow color is defined as a semi-transparent black (rgba(0, 0, 0, 0.5)).

It’s important to note that the text-shadow property adds a shadow effect to the text but does not affect the underlying text color or other text properties. It can be used to enhance the readability of text by providing contrast against the background or to create decorative effects.

The text-shadow property is commonly used in headings, banners, or other prominent text elements to give them a visually appealing appearance. However, it’s important to use text shadows judiciously to ensure readability and avoid excessive or distracting effects that may compromise the user experience.

Syntax

h1 {
  text-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
}

Values

offset-x offset-y blur color: core shadow syntax.
Multiple shadows separated by commas to layer effects.
none: remove shadows.

Practical Examples

h1 {
  text-shadow: 0 6px 18px rgba(14, 165, 233, 0.55);
}

Add depth or readability to text placed on rich imagery.

HTML

No shadow

Soft glow

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-32 rounded-xl border border-slate-200 bg-gradient-to-r from-slate-900 to-slate-700 p-6 text-white">
    <p class="text-lg font-semibold">No shadow</p>
  </div>
  <div class="h-32 rounded-xl border border-slate-200 bg-gradient-to-r from-slate-900 to-slate-700 p-6 text-white">
    <p class="text-lg font-semibold" style="text-shadow: 0 10px 18px rgba(14,165,233,0.55);">Soft glow</p>
  </div>
</div>

Tips & Best Practices

Layer subtle shadows for legibility on images instead of relying solely on overlays.
Use sparingly for body text to avoid blurriness.
For neon/glow effects, combine multiple shadows with increasing blur.

Accessibility & UX Notes

Ensure shadows do not reduce contrast; test with contrast checkers that ignore shadowed areas.

Browser Support

Supported in all modern browsers (IE10+).

box-shadow for element-level depth.
filter: drop-shadow() for non-rectangular SVG text.
mix-blend-mode to blend text with backgrounds.