Text shadow generator
Build CSS text-shadow visually: add or remove layers with their own horizontal and vertical offsets, blur and color, set the text, font size, weight and colors, preview live, and copy the text-shadow value or a full class — six presets included.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
The preview background can be changed on its own so the shadow stays visible
Presets
Applying a preset only replaces the shadow layers
Text
Shadow layers
Up to six layers, earlier layers paint above later ones and are separated by commas
CSS code
.text-shadow {
font-size: 32px;
font-weight: 700;
color: #111827;
text-shadow: 0px 2px 6px rgba(15, 23, 42, 0.35);
}What this tool does
- Tune headings, logos or card copy: stack a few shadow layers, watch the live preview and copy CSS you can paste straight into a stylesheet.
- Generate outline, neon glow or 3D stacked text-shadows that would be tedious and error-prone to hand-write.
- Change the preview background on its own to check contrast for dark text on a light card or light text on a dark hero.
- Emit font-size, font-weight and color alongside the shadow so the whole block is ready to drop into your CSS.
Example
Input
font-size 32px, weight 700, color #111827, one shadow layer 0 2 6 #0F172A59
Output
.text-shadow {
font-size: 32px;
font-weight: 700;
color: #111827;
text-shadow: 0px 2px 6px rgba(15, 23, 42, 0.35);
}A shadow colour with alpha is emitted as rgba(): the last two hex digits are the alpha channel, 0x59 / 255 ≈ 0.35.
Frequently asked questions
Why did my 8-digit colour become rgba()?
Colours accept hex only (#RGB, #RGBA, #RRGGBB, #RRGGBBAA). Whenever the alpha is below 1 the output uses rgba(); a fully opaque colour is written as 6-digit hex because it is shorter and more widely compatible.
Does the order of the shadow layers matter?
Yes. Earlier layers paint on top of later ones, which is why outline presets put the four directional offsets first. Up to six layers are supported; more than that is rejected.
Can the blur radius be negative?
No. A negative blur radius is invalid CSS, so the tool clamps it to 0. The horizontal and vertical offsets may be negative, which is how you cast a shadow up and to the left.
Is the generated code ready to use?
Yes — it is a complete class snippet (selector .text-shadow by default) with font-size, font-weight, color and text-shadow. To rename the selector, edit the copied text.
Keywords：csstext-shadow文字阴影描边文字霓虹字3d 文字发光阴影生成器前端样式typography