CSS Text Shadow Generator

Build a text-shadow stack

1. Edit the sample text and each enabled layer’s horizontal offset, vertical offset, blur radius, color and opacity. Fields accept hundredths; sliders provide quick whole-unit adjustments.
2. Add, duplicate, exclude, remove or move layers. The first enabled layer in the list is frontmost among shadows. Disabled layers keep their drafts but are omitted from CSS.
3. Inspect the current CSS and native preview, then select Copy CSS. Only the shadow declaration is copied; specimen text, typography and background remain preview context.

Understand the authored layers

Each layer emits horizontal offset, vertical offset and nonnegative blur in CSS pixels, followed by an explicit RGBA color. Negative offsets move left or up; zero blur gives a sharp shifted shadow. The property follows glyphs rather than the element’s rectangular box.

The first listed shadow paints in front of later shadows, while these outer shadows remain behind the text. Moving layers can change overlapping colors. This stack is different from a filter pipeline where each operation receives the previous result.

Shadow opacity becomes alpha in that shadow’s color. For example, 37.5% becomes exactly 0.375 without passing through an eight-bit alpha channel. Text opacity is a separate preview color setting, so transparent text can still have visible shadows.

An enabled transparent layer remains in the declaration. Excluding every layer or clearing the list emits text-shadow: none;. Explicit none resets inherited shadows; an empty invalid declaration is not a substitute.

Order, color and transparent-layer examples

The example’s first layer is -3.25px horizontally, 6.5px vertically and 0px blur, with #336699 at 37% opacity. Its channels are 51, 102 and 153, and its alpha is 0.37. A second orange layer uses 0px, -2px, 12px blur and 80% opacity.

Moving the orange layer first changes the comma-separated order without changing either layer’s values. Use the preview to inspect overlap; the tool does not merge duplicates, sort colors or optimize invisible layers away.

A zero-offset, zero-blur transparent black layer is valid authored CSS even if no shadow ink is visible. Disabling it instead removes it from the stack; if no enabled layer remains, the output is the explicit none declaration.

Authoring and preview limits

This editor supports up to twelve layers, offsets from -64 to 64 CSS pixels, blur from 0 to 64, six-digit hex colors and opacity from 0 to 100%, with hundredth precision. It intentionally authors an established subset, without spread, inset, currentColor, arbitrary units or CSS import; newer specifications discuss additional syntax.

The specimen uses your plain text and a local system font. Font fallback, glyph shapes, size, line breaks and wrapping affect appearance. Copy includes only text-shadow, so a receiving page can look different. This is not a contrast, readability or pixel-match certification.

Shadows do not enlarge text layout or scrollable overflow. The padded preview is an approximate viewing area, and edges can clip blur or offsets. Scrolling follows the text’s layout and cannot guarantee access to every painted shadow pixel.

Invalid enabled-layer drafts remove current CSS and the styled specimen until repaired. Disabled parameter drafts are ignored until re-enabled. Invalid preview-only settings withhold the specimen while valid CSS remains available; empty sample text is allowed.

Local styling without uploaded text

The tool adds no upload, remote font, saved settings history, input-bearing link or telemetry containing your specimen and settings. Copy is explicit. Existing site services, extensions and copies you retain are outside a universal privacy or erasure promise.