Skip to main content
Book Consultation →
CSS100% FreeInstant

CSS Text Shadow Generator: Glow, Outline and More

This free CSS text shadow generator writes text-shadow code from simple settings or from presets such as soft shadow, glow, neon, hard outline and long shadow.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

A text shadow adds depth, a glow or an outline to type. It is a quick way to make a heading stand out on a photo or a gradient.

Pick a preset or set the values by hand.

How to Use This Tool

  1. Pick a preset, or choose Custom.
  2. Set offsets, blur, color and opacity.
  3. Press Generate.
  4. Copy the CSS.

How the Calculation Works

The color is written as rgba. Soft uses a small offset and blur. Glow uses zero offsets and a large blur. Neon stacks three glows of growing size. Outline uses four one-pixel shadows. Long shadow stacks 20 one-pixel steps along a diagonal.

Worked Example

Offsets 2 and 2, blur 4, color #1d4ed8 at 60% gives text-shadow: 2px 2px 4px rgba(29, 78, 216, 0.6);.

Common Uses

  • Headings on images.
  • Neon and glow effects.
  • Outlined text.
  • Retro long shadows.

Tips and Common Mistakes

  • Use dark text with a light shadow for a letterpress look.
  • Check contrast at small sizes.
  • Avoid heavy shadows on body text.

Next, you may need the box shadow generator, border radius generator, CSS clamp calculator, px to rem converter.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

Horizontal offset, vertical offset, an optional blur radius and a color, for example 2px 2px 4px rgba(0,0,0,0.5).
Use zero offsets, a blur of 8 to 20 pixels and a bright color. Stack several layers for a neon look.
Yes, with four shadows of 1 pixel in each direction and no blur. It works in all browsers.
Keep contrast high. A shadow should help the text, not hide it.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.