Developer Tools New Tool

Free Online CSS Text Shadow Generator with Layered Shadows

Set the offset, blur and colour of a text shadow and see it on real type as you drag. Layer several shadows to build an outline or a raised edge, try the three honest presets, and copy a text-shadow rule with the commas and the units already written in.

Free Forever Nothing Uploaded Layered and outlined Runs in your browser

Free Online CSS Text Shadow Generator with Layered Shadows

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Text Shadow Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Readable over anything

CSS

Presets

Type Size 48px Weight Text Dark surface

1 layers

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Text Shadow

A few steps, and nothing is uploaded.

Pick a starting point Choose a preset for a soft lift, a hard offset or a four-shadow outline, or keep your own layers and start from those.

Set each layer Offset X and Y, blur, colour and alpha. There is no spread value in text-shadow, so those four are all there is.

Test it on real type Change the size, the weight and the text colour, and switch the surface to dark. A shadow that works at 48px often disappears at 16px.

Copy the rule The output is one text-shadow declaration with your layers joined by commas in painting order.

What to Know About Text Shadows

Starting with the value text-shadow does not have.

text-shadow has no spread value. Where box-shadow takes four lengths, text-shadow takes at most three: offset X, offset Y and blur, followed by the colour. If you paste a four-length value in from a box shadow the whole declaration is invalid and the browser drops it, which is a common and very confusing mistake.

An outline is four shadows, not one. Because there is no spread, the usual way to ring a letter is a zero-blur shadow offset up, down, left and right by the same amount. It works, but at more than about two pixels the corners start to look chipped, since four straight offsets cannot round a corner. For a real stroke, -webkit-text-stroke or an SVG is a better fit.

Layers are painted in order, first one on top. The same rule as box-shadow. A tight dark layer belongs first and any wide glow last, and reversing them gives a softer, muddier result rather than an error.

This page cannot judge contrast for you. It shows the shadow on a flat light or dark panel, not on your photograph, and it makes no accessibility measurement. A shadow can make text look readable in a preview and still fail against a busy image, so check the real background before you rely on it.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Layered shadows Comma-separated layers, added and removed as you work.

Offset, blur, colour The three lengths text-shadow actually takes, plus alpha.

Three honest presets Soft lift, hard offset, and an outline built from four shadows.

Preview on real type Your own size, weight and colour, on a light or dark panel.

Paste-ready rule A single text-shadow declaration with units and commas in place.

Runs in your browser Nothing is uploaded and no font is fetched to make the preview.

About the CSS Text Shadow Generator

Text shadows earn their keep in two places: lifting a heading off a busy background so it can be read, and giving type a deliberate look, whether that is a soft raised edge or a hard retro offset. The property is simpler than box-shadow, because it takes only an offset, a blur and a colour, and that missing fourth value is the source of most of the trouble people have with it.

This page gives you the layers rather than a single shadow, because almost everything interesting needs more than one. Each layer has its own offset, blur, colour and alpha, and the preview draws them on real text at a size, weight and colour you choose, on a panel you can switch between light and dark. What the panel shows is the browser rendering the declaration, not a picture of it.

The presets are deliberately plain. A soft lift is one faint layer, a hard offset is a single shadow with no blur, and the outline is the four-shadow trick written out so you can see how it is built and where it breaks down. The output is a normal declaration you could have typed yourself, with the commas and the units handled.

Frequently Asked Questions

Outlines, readability, spread and where to stop.

Almost certainly because it has a spread value. text-shadow accepts offset X, offset Y and blur, and nothing more, so a value with four lengths in it is invalid and the browser ignores the whole declaration. Delete the fourth number and it will start working.

Use four shadows with zero blur, offset the same distance up, down, left and right, all in the outline colour. The preset here does exactly that. It is fine for one or two pixels, but the corners get visibly chipped as the offset grows, because four axis-aligned copies cannot make a round join. For a thicker stroke, look at -webkit-text-stroke or draw the type as SVG.

Sometimes, and less often than people hope. At small sizes a blurred shadow tends to thicken the letterforms and reduce clarity rather than improve it. A dark translucent panel behind the text, or a gradient scrim over the image, is usually more reliable, with a faint shadow on top of that.

Far less than a box shadow of the same size, but it is still blurred at paint time. A few layers on a heading is nothing to worry about. A heavy multi-layer glow on body text in a long scrolling article is worth measuring, especially on older phones.

Yes, the property is animatable, and it interpolates smoothly as long as both keyframes have the same number of layers. If the layer counts differ the browser cannot pair them up and the change jumps rather than fading. Keep the layer count the same and animate the numbers.