What Is CSS Text Shadow?
The text-shadow property adds shadow effects to text — from subtle depth cues to dramatic neon glows and 3D letterpress effects. Unlike box-shadow (which shadows the element box), text-shadow follows the actual shape of each character, creating precise, typography-specific effects.
Popular Text Shadow Techniques
Subtle depth — a light 1px offset creates readable text lift on light backgrounds. Neon glow — stack multiple shadows at 0 0 with increasing blur and a bright color. 3D / Letterpress — layer shadows at incremental offsets to simulate extruded text. Long shadow — dozens of shadows at 1px increments create a trendy long-shadow effect.
How to Use This Text Shadow Generator
- Enter your text — Type the text you want to apply a shadow to — works best with large, bold headings.
- Adjust shadow offsets — Set the horizontal (X) and vertical (Y) offset in pixels. Positive X moves right, positive Y moves down.
- Set blur and color — Control the blur radius for soft vs. sharp shadows, and choose the shadow color.
- Layer multiple shadows — Add additional shadow layers for effects like neon glow, 3D text, or retro outlines.
- Copy the CSS — Grab the complete
text-shadow property declaration.
Tips and Best Practices
- → Use text-shadow for subtle depth. A light text-shadow (1px 1px 2px rgba(0,0,0,0.1)) adds subtle depth without looking heavy — great for white text on images.
- → Layer shadows for neon effects. Stack multiple text-shadows with the same color at increasing blur values to create a glowing neon text effect.
- → 3D text uses stacked offset shadows. Create a 3D text effect by layering multiple text-shadows with incrementing offsets: 1px 1px, 2px 2px, 3px 3px — each slightly darker.
- → Use text-shadow to improve contrast. When placing text over images, a dark text-shadow behind light text ensures readability regardless of the background image content.
Frequently Asked Questions
What is CSS text-shadow?
A property that draws one or more copies of the text's glyphs behind it, each with an x offset, y offset, optional blur radius and colour: text-shadow: 2px 2px 8px #00FFD1. Separate several shadows with commas; the first one listed is drawn on top.
How do I create a neon glow?
Stack shadows with zero offset and growing blur in the same bright colour, for example 0 0 10px, 0 0 40px and 0 0 80px, as the Neon Glow preset does. Light text on a dark background sells the effect.
Can I animate text-shadow?
Yes, text-shadow transitions and animates between values, and the browser interpolates each shadow in the list. Both lists should have the same number of shadows for a smooth result. The browser repaints the text on every frame, so keep it to a few headings.
How does the layer list work?+
Each layer is one shadow in the comma-separated list. Add Shadow appends a layer and selects it, the X, Y and Blur sliders and colour picker edit the selected layer, and you can remove layers down to one. The copied CSS lists them in the same order, top layer first.
Is there a spread value like box-shadow?+
No. text-shadow takes only offsets, blur and colour; there is no spread and no inset. To thicken an outline, add more zero-blur shadows around the text, as the Outline preset does with four 1px shadows.
What is the difference between text-shadow and filter: drop-shadow()?+
text-shadow belongs to the text itself and can stack many shadows. filter: drop-shadow() shadows the element's whole rendered output, following transparent areas of images and icons, takes one shadow per function and has no effect on layout. For text alone, text-shadow is simpler.
How do I create a 3D extruded text effect?+
Stack zero-blur shadows one pixel apart in the same direction, getting slightly darker as they go: 1px 1px, 2px 2px, 3px 3px and so on. The 3D Depth preset uses five layers; more layers make a deeper extrusion.
Does text-shadow hurt accessibility?+
It can. A shadow does not count toward WCAG text contrast, so light text with a dark glow on a light background still fails if the text colour itself lacks contrast with the background. On busy images, a solid or semi-transparent backing behind the text is more reliable than a shadow.
How do I create a text outline without text-stroke?+
Stack four zero-blur shadows offset 1px up, down, left and right in one colour, as the Outline preset does. -webkit-text-stroke is the other option and is supported in all current browsers (Chrome 4+, Safari 3+, Firefox 49+ per MDN), but it draws the stroke centred on the glyph edge, so it eats into thin letters.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service