CSS Text Shadow Generator
Build a CSS text-shadow with live controls. Adjust the X and Y offset, blur and color, stack multiple shadow layers, then copy the generated text-shadow rule.
How to generate a CSS text shadow
- Drag the offset X, offset Y and blur sliders to shape the shadow.
- Pick a color, then add more layers to stack several shadows.
- Copy the text-shadow code from the output box into your stylesheet.
Examples
Soft drop shadow
offsetX 2, offsetY 2, blur 4, rgba(0,0,0,0.5)
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Layered outline glow
1px 1px 0px #000000 plus -1px -1px 0px #ffffff
text-shadow: 1px 1px 0px #000000, -1px -1px 0px #ffffff;
Frequently asked questions
What do offset X, offset Y and blur control?
Offset X and Y move the shadow horizontally and vertically behind the text. Blur softens the edge, with larger values fading it out more. A blur of 0 gives a hard, crisp shadow.
Can I stack multiple text shadows?
Yes. CSS lets you list several shadows separated by commas on a single text-shadow property. Use Add layer to stack them, and the tool joins each layer with commas in order for you.
How do I make a glow or outline effect?
For a glow, use a blur with no offset and a bright color. For an outline, stack several small shadows offset in different directions, often with a contrasting color around the text.
Which color formats can I use?
Any valid CSS color works, including hex like #000000, rgb(), rgba() with transparency, hsl() and named colors. The color you type is written into the rule exactly as given.
Do text shadows affect performance or accessibility?
Static text shadows are cheap to render, though heavy blur on large text can cost repaint time. Keep enough contrast between the text and its shadow so the words stay easy to read.
Is my work sent to a server?
No. The preview and the generated code are computed entirely in your browser, so nothing you type is uploaded.
Related tools
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.