CSS Text Shadow Generator

Design Tools

Create glow and drop shadows for text

FreePrivateInstant
Horizontal offset (px)
Vertical offset (px)
Blur (px)
Shadow color
Opacity (0–1)
Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

CSS Box Shadow GeneratorVisual box-shadow builder with CSS output
CSS Gradient GeneratorCreate linear & radial CSS gradients
CSS Animation GeneratorReady CSS keyframes with live preview
CSS Button GeneratorDesign buttons and copy the CSS
CSS Grid GeneratorVisual CSS grid builder with code to copy
Glassmorphism CSS GeneratorFrosted glass card effect in CSS

History

All history →

CSS Text Shadow Generator — at a glance

Add depth or a neon glow to headings and build the CSS visually.

Input
X 3, Y 3, Blur 6
Color #6366F1
Run
Result
text-shadow: 3px 3px 6px rgba(…);

How to use it — step by step

Set offsets, blur, color and opacity — or switch on glow style.

1

Enter your values

Fill in the boxes. Sensible example values are already filled in for you.

2

Generate Text Shadow

Press the button. The answer is worked out instantly on your device.

3

Read or copy the result

See the big answer and the extra details, then press Copy to keep them.

Pro tips

Small things that make the result better.

✦Use 0 offset with a large blur for a soft glow.
✦Glow style works best on dark backgrounds.
✦Keep shadows subtle so text stays readable.

Quick facts

Livepreview
Glow3-layer option
RGBAwith opacity
Freeno signup

Frequently Asked Questions

Can I add several shadows?+

Glow style stacks three layers. You can also add more by separating shadows with commas in your CSS.

Does text-shadow work on all browsers?+

Yes. Every modern browser supports it.

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

More Free Tools

Guides you might like

All guides →
Color Contrast CheckerIs your text readable? The contrast ratio, explained
Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to use
PX to REM Converterpx vs rem: why your font sizes should be allowed to scale
Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises