HomeToolsText Shadow

CSS WORKSPACE

Text Shadow

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Text Shadow

Presets
Text Settings
64px
Layer 1
2
2
4
PREVIEW
Preview Text
css
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
A PRACTICAL GUIDE

Make decorative text effects readable

Text shadow follows the shape of the letters rather than the box around them. It is useful for a restrained lift on a display heading or a deliberate layered effect. Body copy usually benefits more from a suitable color, weight, and background than from a shadow.

How to use this tool

  1. Start with a single shadow layer and a small vertical offset. Read the preview at the size your actual text will use.
  2. Adjust blur and transparency before adding more layers. Use distinct offsets for a stacked effect, or low opacity for a soft shadow.
  3. Copy the text-shadow property onto the heading selector and test it with your real font and content.

This soft downward shadow can help a white display heading feel separated from an image. The effect does not change the letters’ layout dimensions. Different font weights may need different blur and opacity settings.

Read the reference documentation ↗
Example to try in your project
.display-heading {
  color: #fff;
  text-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

Before you ship

Text shadow is not a substitute for sufficient text contrast. A heavily blurred or multi-layer shadow can make small text harder to read, particularly at browser zoom levels above 100%.

Explore a related tool