Micro Tools
Advertisement

Text shadow generator

Dial in offset, blur, opacity and color sliders to style a live text-shadow, then copy the ready-to-paste CSS. Works for headings, logos and retro multi-layer effects.

Shadow controls

Drag the sliders. The preview and the CSS update live.

Preview and CSS
Shadow
Advertisement

How text-shadow is written

The CSS syntax is text-shadow: x-offset y-offset blur color. Offsets move the shadow right and down when positive, left and up when negative. Blur 0 gives a hard retro edge, larger values give a soft glow. You can comma-separate several shadows for layered 3D lettering effects.

Opacity versus a darker color

Lowering opacity with rgba keeps the shadow color pure but see-through, which looks natural on busy backgrounds. Picking a darker solid color instead gives a flatter graphic look, popular in brutalist and retro poster styles where the shadow is part of the design.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Text Shadow Generator FAQs

What values make a readable drop shadow for body text?
For body text keep it subtle: 1px offset, 1 to 2px blur, black at 20 to 30 percent opacity. Heavy shadows on small text hurt legibility, so reserve big blurry shadows for large display headings.
How do I make a neon glow effect?
Set blur high, around 15 to 25px, opacity near 100 percent, and a vivid color like cyan or magenta. Then stack a second softer shadow by copying the CSS twice into your stylesheet for a stronger glow.
Can I layer multiple shadows?
Yes, CSS accepts comma-separated shadows like text-shadow: 2px 2px 0 red, 4px 4px 0 blue. This tool outputs one layer; duplicate the line in your editor and tweak the offsets for retro 3D lettering.
Why does my shadow look different on a dark background?
Shadows need contrast to be visible. On dark backgrounds use a lighter shadow color or increase opacity. The preview stage here is dark on purpose so you can judge glow effects accurately.
Does text-shadow work in all browsers?
Yes, text-shadow is supported by every modern browser including mobile Safari and Chrome. It has been stable CSS for over a decade, so it is safe for production use.
Advertisement