How to use CSS Text Shadow Generator
- Adjust offsets and blur.
- Choose a color and opacity.
- Copy the text-shadow CSS.
About this tool
Text shadows use offset-x, offset-y, blur radius and color. A small offset with no blur creates a hard drop shadow, while zero offset with a large blur creates a glow. Use shadows lightly, because heavy effects reduce legibility.
Check text and background contrast after adding a shadow.
Frequently Asked Questions
- Can I add multiple text shadows?
- Yes. Separate shadows with commas in the text-shadow property.
- Does text-shadow work on all text?
- It applies to any text element in all modern browsers.
Related tools
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.
- Fancy Text GeneratorGenerate stylish Unicode text for Instagram bios, captions and usernames.
- PX to REM ConverterConvert between pixels and rem for scalable CSS.
- CSS Clamp GeneratorCreate fluid sizes that grow between a minimum and maximum viewport.
- Glassmorphism CSS GeneratorBuild a frosted glass card and copy the CSS.
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.