Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Text Shadow Generator

Dial in a CSS text-shadow with a live preview and copy the exact code.

Preview

Click the text above to edit it. Everything runs in your browser. Nothing is uploaded.

Text
#111827
Shadow
#000000
CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);

How to make a CSS text shadow

  1. Type your text

    Click the preview and type the words you want to style so you can judge the shadow on real text.

  2. Set the offset and blur

    Drag the horizontal offset, vertical offset, and blur sliders until the shadow sits where you want it.

  3. Pick a color and opacity

    Choose the shadow color and set its strength with the opacity slider, which combine into a single rgba() value.

  4. Copy the CSS

    The full text-shadow declaration updates live below the controls. Click Copy CSS to grab it.

Why use this tool

Live preview you can type into

Edit the sample text right in the preview and watch the shadow redraw with every keystroke and every slider move.

Offset, blur, color, and opacity

Horizontal and vertical offsets from -50 to 50 pixels, blur up to 50 pixels, and an opacity slider that folds into the color as an rgba() value.

Second layered shadow

Turn on a second shadow to stack two effects, like a highlight over a drop shadow or a soft outline, in one declaration.

Backgrounds for judging contrast

Switch the preview between a light surface, a dark surface, and a checkerboard so you can see the shadow against the setting you plan to use.

Paste-ready declaration

The output is a complete text-shadow rule ending in a semicolon, ready to drop straight into any CSS rule.

Runs entirely in your browser

The preview and the CSS are generated on your device, with nothing uploaded and no signup.

About this tool

This text shadow generator builds a CSS text-shadow declaration from a handful of controls: horizontal offset, vertical offset, blur radius, color, and opacity. Type your own words into the preview and every slider movement redraws the text and rewrites the code in the same instant, so the CSS you copy is exactly the effect you were looking at. The chosen color and opacity are merged into a single rgba() value, the form most shadows take in production stylesheets.

Text shadows are subtle by nature, and the numbers interact. A soft drop shadow wants a small offset and a few pixels of blur, a hard retro shadow wants a larger offset and no blur at all, and a glow wants zero offset with heavy blur. Flip the preview between a light background, a dark background, and a checkerboard to judge the shadow the way it will actually sit on your page. When one shadow is not enough, add a second layered shadow to stack a highlight over a shadow or build a rough outline, and both are written into one comma-separated declaration.

Nothing leaves your device: the preview is drawn and the CSS is generated in your browser, with no account and no upload. Pair it with the CSS box shadow generator for shadows on boxes and cards, the gradient generator for the background behind your text, or the color converter when your shadow color starts out as an HSL or RGB value.

Frequently asked questions

What do the text-shadow values mean?
A text-shadow has a horizontal offset, a vertical offset, a blur radius, and a color. The offsets move the shadow away from the text, blur softens its edge, and the color plus opacity set its tint and strength.
How do I add a second shadow?
Turn on the second shadow toggle to reveal a second set of controls. The two shadows are combined into one comma-separated text-shadow declaration, which is how CSS stacks multiple shadows on the same text.
How do I make a glow or an outline effect?
For a glow, set both offsets to zero and raise the blur so the color spreads evenly around the letters. For a rough outline, use the second shadow with no blur and offsets pointing the opposite way from the first.
How do I use the generated CSS?
Copy the CSS and paste the text-shadow declaration into your stylesheet on the element whose text you want to style. The output is a complete declaration, so it drops straight into any rule.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server. The preview is drawn locally and the CSS is generated on your device.

Related tools