# CSS Text Shadow Generator

> Design text shadows, outlines and glow effects with a live preview.

To create a CSS text shadow, set the horizontal and vertical offset, blur and colour, and the preview updates as you type. Five presets built from your chosen colour show common effects: soft drop, hard offset, neon glow, outline and embossed.

**URL:** https://convertto.tech/t/text-shadow-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Enter or paste your preview text.
2. Set the horizontal offset.
3. Set the vertical offset.
4. Set the blur radius.
5. Pick the shadow colour.
6. Set the opacity.
7. Set the font size.
8. The result appears immediately — copy or download it.

## FAQ

### How do I make a text outline in CSS?

Stack four shadows at one pixel in each diagonal direction with zero blur. The generator includes this as the "Outline" preset. For thicker outlines, -webkit-text-stroke is cleaner but has less consistent rendering.

## Related tools

- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [Gradient Text Generator](https://convertto.tech/t/gradient-text-generator): Fill text with a gradient, a metallic sheen or a chrome effect using background-clip.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [Installed Font Checker](https://convertto.tech/t/font-availability-checker): Test which system fonts are actually available before you rely on them in a font stack.