Make a CSS text-shadow for glows, outlines and 3D lettering, with a live preview
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.text-shadow works like box-shadow on the letters themselves, with two differences: there is no spread and no inset. Set the offsets, blur and colour, and stack layers for a neon glow, a hard outline or stepped 3D lettering. The preview uses your own sample text, and the result is one text-shadow line to paste into your stylesheet.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
A good shadow is what makes a card look lifted off the page, and it is usually two or three layers rather than one. Build them with sliders while the preview updates, or paste a shadow you already use and adjust it.
Reading a pasted shadow. Paste any box-shadow value, with or without the property name, such as values copied from a design tool or a CSS framework. Hex colours, rgb() and rgba() in either syntax, and a few colour names are read. A shadow with no colour uses the text colour, so it is edited as black and the page says so.
Text shadow. Switch to text-shadow for glows, outlines and 3D lettering. Text shadows have no spread and no inset, so those controls disappear.
The rest of the article, and all 6 questions about CSS Box Shadow Generator, are on the CSS Box Shadow Generator page.
Each shadow is written as offset-x offset-y blur spread colour, for example 0 4px 12px rgb(0 0 0 / 0.15). The offsets move the shadow, blur softens its edge and spread grows or shrinks it. Several shadows can be listed with commas, and the first in the list is drawn on top.
Use two or more layers with low opacity: a small, tight shadow such as 0 1px 2px at 0.24 opacity for the contact edge, plus a larger one such as 0 10px 15px -3px at 0.1 opacity for depth. The Lifted and Soft presets are built this way.
inset draws the shadow inside the box's border instead of outside it, as if the box were pressed into the page. It suits input fields, pressed buttons and wells. Inset and normal layers can be mixed in one box-shadow, which is how neumorphic designs get their raised and sunken look.
text-shadow accepts only two or three lengths, the offsets and an optional blur, plus a colour; spread and inset belong to box-shadow alone. A fourth length makes the whole declaration invalid, so browsers drop it. Stack several thin text-shadow layers to fake a thicker outline.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Box Shadow Generator and anybody who knows can answer. No account needed.
Same job, other tools: MD5 Generator – MD5 hash of text or a file, for checksums and legacy systems.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.