Skip to main content
iotools.cloudiotools.cloud

CSS Text Shadow Generator

Build a multi-layer CSS text-shadow — up to four layers of offset, blur, color and opacity — with a live preview on your own text, then copy the declaration, full CSS rule and HTML.

Input

Only used for the preview and HTML snippet — the shadow works on any text.

Layers are comma-separated; the first one listed paints on top.

Below 100% the color is written as rgba().

Output

Your shadowed text will appear here.

text-shadow declaration
CSS
HTML
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "NEON",
    "fontSize": "96",
    "fontFamily": "sans",
    "fontWeight": "400",
    "textColor": "#ffffff",
    "bgColor": "#0b0b1a",
    "layers": "4",
    "offsetX1": "0",
    "offsetY1": "0",
    "blur1": "4",
    "color1": "#ffffff",
    "opacity1": "100",
    "offsetX2": "0",
    "offsetY2": "0",
    "blur2": "10",
    "color2": "#ff00de",
    "opacity2": "100",
    "offsetX3": "0",
    "offsetY3": "0",
    "blur3": "20",
    "color3": "#ff00de",
    "opacity3": "100",
    "offsetX4": "0",
    "offsetY4": "0",
    "blur4": "40",
    "color4": "#ff00de",
    "opacity4": "100"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-text-shadow-generator` tool (CSS Text Shadow Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/css-text-shadow-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS Text Shadow Generator — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

The CSS text-shadow property is small but versatile. One layer gives you a soft drop shadow. Stack several and you get neon glows, chunky retro 3D lettering, crisp outlines or a pressed-in letterpress look. The hard part is the numbers: each layer has two offsets, a blur radius and a colour, and the effect only comes together when you can see the layers interact. This generator lets you adjust every layer with sliders, watch the result on your own text, and copy CSS you can use straight away.

How to use it

  1. Type your sample text and pick a font, weight and size. They only drive the preview and the HTML snippet, since the shadow works on any text.
  2. Set the text and background colours to match your page. A glow that looks great on navy can disappear on white.
  3. Choose how many shadow layers you want (1–4). Each layer gets its own controls:
    • Horizontal / vertical offset: how far the shadow moves right/down (negative values move it left/up).
    • Blur radius: 0 gives a hard-edged copy, and higher values soften it into a glow.
    • Shadow color + opacity: below 100% opacity the colour is written as rgba().
  4. Copy the output. You get the one-line text-shadow declaration, a complete CSS rule (font, colours and shadow), and a matching HTML snippet.

Click Try an example to load a four-layer neon glow, which is a quick way to see how stacked layers combine. The recipes below give the exact values for other classic looks.

How layered text shadows work

text-shadow takes a comma-separated list of shadows, each written as offset-x offset-y blur-radius color. The first shadow in the list is painted on top, and each later one sits behind the one before it. That ordering is what makes the classic effects work:

  • Neon glow: zero offsets with increasing blur: 0 0 4px #fff, then 0 0 10px, 0 0 20px and 0 0 40px in a bright colour such as #ff00de. This builds a halo that is bright near the letters and fades outwards. Use it on a dark background.
  • Retro 3D: hard shadows (blur 0) stepped diagonally in darkening shades (2px 2px 0, 4px 4px 0, 6px 6px 0) extrude the letters. A final blurred, semi-transparent layer (10px 10px 8px, 30% black) grounds them.
  • Outline: four hard shadows (-2px -2px 0, 2px -2px 0, -2px 2px 0, 2px 2px 0) trace a stroke around the glyphs. Unlike -webkit-text-stroke, this works everywhere.
  • Letterpress: a light 0 1px 0 shadow (80% white) with a dark 0 -1px 0 one above it (20% black) makes text look pressed into the page. It works best on mid-grey backgrounds.

Unlike box-shadow, text-shadow has no spread value and no inset keyword. If you need those for a card or button, use the CSS Box Shadow Generator instead.

Performance and accessibility tips

  • Large blur radii on big blocks of text cost paint time. Keep heavy multi-layer glows for headings rather than body copy.
  • Shadows don't count towards text contrast. Make sure the text colour alone contrasts well enough with the background, because shadows can reduce legibility at small sizes.
  • For an animated effect, see the CSS Glitch Text Generator, and for colour inside the letters rather than around them, try the Gradient Text CSS Generator.

Privacy

Everything runs in your browser. Your text and settings are never uploaded.

neon textglow effect3d textretro textoutline textletterpresstypographyfont effectdrop shadowrgba

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads