CSS Text Shadow Generator
Soft, glow, neon, outline and retro text shadows with a live preview. Free, and runs entirely in your browser — nothing you enter is uploaded or stored.
About Text Shadow Generator
Designs text shadows — a single shadow you shape yourself, or ready-made soft, glow, neon, outline, retro and long-shadow styles — and previews them on your text, colours and background, with the text-shadow to copy.
Text shadow is at its most useful as a quiet legibility aid: a soft dark shadow behind white text on a photo keeps it readable over light and dark patches alike. The louder styles are for display type — headings, hero text, logos — where the effect is the point.
Several shadows can be layered in one declaration, separated by commas, and each is drawn behind the ones before it. Glow and neon are built that way: a tight bright shadow for the core and progressively wider, fainter ones for the halo.
Where it helps
- Ready-made glow, neon, outline, retro and long-shadow styles, plus a fully custom single shadow.
- Previews on your own text, text colour and background.
- Reports the text contrast without the shadow, so legibility is not left to the effect.
- Writes layered shadows correctly, in the order the browser draws them.
Limits
- Heavy shadows reduce legibility at body sizes; keep effects for headings.
- The outline style uses four offset shadows, which looks slightly jagged at large sizes — -webkit-text-stroke gives a cleaner outline where supported.
- Long shadows use many layers and can slow down animated or scrolling text on low-end devices.
Frequently asked questions
How do I make text readable over an image?
Use the soft style — a small, faint dark shadow — or add a semi-transparent overlay behind the text. A shadow helps over busy areas, but if the colour pair itself fails contrast, fix the colours first.
Why does my neon look flat?
Neon needs a dark background and a bright, saturated colour. On a light background the glow has nothing to stand out against.
Can text-shadow be animated?
Yes, and browsers interpolate between shadows with the same number of layers. Animating many layers or large blurs is costly, so keep animated shadows simple.
Related tools
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- Web Font Previewer — Set your own text in a font file before you ship it
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Image Colour Picker — Pick a colour out of a picture and read it back
More Colors & Design tools
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Image Colour Picker — Pick a colour out of a picture and read it back
- Gradient Generator — Build linear, radial and conic CSS gradients
- Random Colour Generator — Random colours from a seed you can keep, in a range you choose
- Palette Generator — Harmonious colour schemes from a base colour
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- Border Radius Generator — Round corners evenly, one by one, or into a blob
- CSS Animation Generator — Build a keyframe animation and watch it run
- Cubic Bezier Editor — Plot an easing curve and feel what it does
- Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
- Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
- Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
- Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
- Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
- Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
- Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
- Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
- CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
- Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
- Web Font Previewer — Set your own text in a font file before you ship it