cssgridgen

CSS Text Shadow Generator

Outline, neon, engraved and embossed. Stack up to six layers.

Sharp shadows

1 layer
text-shadow: 0px 2px 6px rgb(15 23 42 / 0.35);

/* Tailwind */
[text-shadow:0px_2px_6px_rgb(15_23_42_/_0.35)]
Free tool

There is no inset text-shadow

text-shadow looks like box-shadow with one value missing, and the differences catch people out: there is no spread, and there is no inset. Engraved and embossed text — the two effects most often searched for as "inset text shadow" — are built out of two ordinary shadows pointing opposite ways.

How to use it

  1. Start from a preset

    Soft, Hard, Outline, Neon, Engraved and Embossed. Each is a working effect, and the Engraved one demonstrates how inset text is faked.

  2. Set your own text

    Type the real words, at the real size and weight. Shadows that look right on a 56px sample often disappear at 16px.

  3. Stack layers

    Outlines need four hard shadows and glows need three soft ones. Add up to six and tune each independently.

  4. Copy it

    The text-shadow declaration, or the Tailwind arbitrary-property form since Tailwind has no core text-shadow utility.

Faking engraved text

Put a dark shadow one pixel above the glyph and a light one one pixel below. The eye reads a light edge on the bottom as a surface catching light from above, and a dark edge on top as a recess — so the text appears cut into the page. Swap the two and it appears raised instead. That is the whole trick, and it is why no inset keyword was ever needed.

Outlines: four shadows, zero blur

One hard shadow in each diagonal direction at one pixel produces a clean outline. For anything thicker, -webkit-text-stroke is now supported across all current browsers and scales better than stacking more shadow layers.

Test at the real size

A shadow tuned on a 56px display heading is usually far too heavy at 16px, where it turns into a smudge that hurts legibility. Type your actual copy into the preview and drop the size down before committing.

Frequently asked questions

Is there an inset text-shadow in CSS?
No — text-shadow has no inset keyword, unlike box-shadow. Engraved text is faked with two shadows: a dark one slightly above the glyph and a light one slightly below, which the eye reads as a cut into the surface. The Engraved preset does exactly this.
How do I add a text shadow in CSS?
text-shadow: 0 2px 6px rgb(15 23 42 / 0.35) — offset-x, offset-y, blur, colour. Unlike box-shadow there is no spread value, and you can stack any number of shadows with commas.
How do I outline text with text-shadow?
Stack four hard shadows at one pixel in each diagonal direction with zero blur. It is cheaper than it sounds and works everywhere. For thicker outlines use -webkit-text-stroke instead, which is now supported across all current browsers.
How do I make a neon glow effect?
Stack three or four shadows of the same hue at increasing blur with no offset, over a light text colour on a dark background. The tight layer gives the filament, the wide ones give the bloom.
Does text-shadow hurt performance?
Large blur radii on a lot of text can cost paint time, especially when animated. A couple of shadows on headings is free in practice; a heavily blurred shadow on body copy that reflows is not. Never animate the shadow itself — animate opacity on a layer instead.
How do I use text-shadow in Tailwind?
There is no core text-shadow utility, so use an arbitrary property: [text-shadow:0_2px_6px_rgb(15_23_42_/_0.35)]. This tool emits that form directly.

Related tools