About This Tool
Text Shadow Generator adds a shadow to letter shapes, with controls for offsets, blur, color, and opacity. Preview input is displayed as plain text. Even HTML tags are shown as text and never executed as page code.
How to Use
- Enter the text you want to preview.
- Adjust the horizontal offset, vertical offset, and nonnegative blur radius.
- Choose the shadow color and opacity, then check the live text effect.
- Copy CSS or click Reset to restore the initial settings.
Examples
- Small offsets and low opacity create a subtle text shadow.
- Zero offsets with a larger blur can create a soft glow.
- Enter letters or symbols from different writing systems to compare their shadows.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);How It Works & CSS Details
text-shadow uses offset-x offset-y blur-radius color. It follows letter shapes and has neither spread-radius nor inset. The shadow color combines validated channels with the selected opacity.
Common Uses
- Fine-tune heading and poster text effects.
- Create soft shadows for brand copy.
- Understand the different settings for text and box shadows.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
How do text-shadow and box-shadow differ?
text-shadow follows the shapes of letters, while box-shadow applies to an element's box.
Why does text-shadow have no spread setting?
Standard text-shadow syntax provides two offsets, optional blur, and color. It has no spread radius.
Can I use multiple text-shadow layers?
CSS supports multiple text shadows separated by commas. This page focuses on reliably generating a single shadow.
Will HTML in the preview text run?
No. Input is displayed through text nodes, so tags and script-like content are treated only as text.