How is text-shadow different from box-shadow?

text-shadow applies a shadow to the glyphs of text and has no spread value, while box-shadow applies to an element's box and supports spread and inset. The syntax is offset-x, offset-y, blur-radius and colour.

How do I create a glow effect?

Set offset X and offset Y to 0, raise the blur, and choose a bright colour. A zero-offset blurred shadow reads as a glow around the text.

Is anything uploaded?

No — the text-shadow value is generated entirely in your browser and nothing is sent anywhere.

What does the opacity slider do to my colour?

The tool converts your hex colour into an rgba() value and uses the opacity slider as the alpha channel, so a black shadow at 50% opacity becomes rgba(0, 0, 0, 0.5). Lower opacity gives a softer, more subtle shadow.

Can I stack more than one text-shadow?

Yes. text-shadow accepts a comma-separated list of shadows. Generate each layer here and join them with commas to build neon outlines, 3D extrusions or multi-colour glows.

How do I make text more readable over a busy background?

A small, low-blur dark shadow with no offset (for example 0px 0px 4px rgba(0,0,0,0.6)) adds a subtle halo that lifts light text off a photo without looking like a deliberate effect.

Why is my blurry text-shadow hard to see?

A high blur spreads the same colour over a larger area, which lowers its apparent strength. Raise the opacity, reduce the blur, or stack two identical shadows to reinforce the effect.

What is the CSS Text Shadow Generator?

Free CSS text-shadow generator with live preview. Adjust offset, blur, colour and opacity on sample text, then copy the ready-to-paste CSS. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Text Shadow Generator

Name: CSS Text Shadow Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

CSS text-shadow generator

This tool styles a CSS text-shadow visually and gives you the exact value to paste into your stylesheet. It is for developers and designers adding depth, glow or readability to headings, hero text and labels. The preview applies the shadow to sample text so you can judge it before copying.

How it works

The text-shadow property follows the order offset-x offset-y blur-radius colour. Note there is no spread value as there is on box-shadow. The generator reads your sliders — offset X and Y move the shadow, blur softens it — and combines your hex colour with the opacity slider into an rgba() value so the shadow can be semi-transparent. The result is applied live to a sample heading.

Example

With offset X = 2px, offset Y = 2px, blur = 4px, colour #000000 and opacity 50%, the tool outputs:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

That is a soft drop shadow below and to the right of the text. Set both offsets to 0 and raise the blur for a glow instead, e.g. 0px 0px 12px rgba(0, 200, 255, 0.8).

Effect	Offset X/Y	Blur
Subtle drop	1–2px	2–4px
Strong drop	3–4px	6px
Glow / neon	0px	10–20px
Readability halo	0px	4px

Stacking multiple shadows

The text-shadow property accepts a comma-separated list of shadows, and they render in order, front to back. Stacking is what enables neon glows, 3D extruded text, and multi-colour effects that a single shadow cannot produce.

For a layered neon outline, you might generate three layers separately and join them:

/* inner glow + mid glow + wide glow */
text-shadow:
  0px 0px 4px rgba(0, 200, 255, 1),
  0px 0px 12px rgba(0, 200, 255, 0.7),
  0px 0px 30px rgba(0, 200, 255, 0.4);

For a simple 3D letterpress effect, offset each layer one pixel further down and to the right than the last, using progressively darker shades:

text-shadow:
  1px 1px 0 rgba(0,0,0,0.3),
  2px 2px 0 rgba(0,0,0,0.2),
  3px 3px 0 rgba(0,0,0,0.1);

Making text readable over images

A common problem is light text over a busy photograph. Adding a very tight, zero-offset dark shadow lifts the text without looking like a deliberate design element:

/* subtle legibility halo */
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);

This is different from a visible drop shadow — the goal is just enough contrast to keep the letterforms readable, not to add visual style. Keep the blur tight (2–5px) and the opacity moderate (0.5–0.7).

Browser support and performance

text-shadow is supported in all modern browsers and has been since Internet Explorer 10. It is GPU-composited when used inside a will-change: transform element, making it animation-friendly. Extremely large blur radii (above 80–100px) can affect painting performance on low-powered devices, so test large glows on mobile before shipping.

The text-shadow value is generated locally in your browser — nothing is uploaded.