CSS Text Shadow Generator
Generate text-shadow CSS with live preview. Adjust offset, blur and color.
Back to all tools on ToolForge
Live Preview
CSS Output
text-shadow: 2px 2px 4px #000000;
About CSS Text Shadow Generator
This tool generates CSS text-shadow values with a live preview. Adjust horizontal and vertical offset, blur radius and color.
Text Shadow Syntax
/* Basic syntax */ text-shadow: x-offset y-offset blur color; /* Parameters */ /* x-offset: horizontal shift (positive = right, negative = left) */ /* y-offset: vertical shift (positive = down, negative = up) */ /* blur: larger = softer edges (0 = sharp shadow) */ /* color: shadow color (any CSS color format) */ /* Examples */ text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Basic shadow */ text-shadow: -2px -2px 4px rgba(0,0,0,0.5); /* Top-left shadow */ text-shadow: 0 0 10px rgba(255,255,255,0.8); /* Glow effect */ text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb; /* 3D effect */
Common Text Shadow Patterns
| Effect | CSS |
|---|---|
| Subtle depth | 1px 1px 2px rgba(0,0,0,0.3) |
| White glow | 0 0 10px rgba(255,255,255,0.8) |
| Neon glow | 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de |
| 3D text | 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa |
| Text emboss | 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(0,0,0,0.5) |
Frequently Asked Questions
- What is the text-shadow syntax?
- Text-shadow syntax is: text-shadow: x-offset y-offset blur-radius color. X-offset controls horizontal shift, y-offset controls vertical shift, blur creates soft edges, and color sets the shadow color. Multiple shadows can be comma-separated for layered effects.
- How do I create readable text shadows?
- For subtle readability enhancement, use small offsets (1-2px) with minimal blur (0-2px) and low opacity. Example: text-shadow: 1px 1px 2px rgba(0,0,0,0.3). For light text on dark backgrounds, try: text-shadow: 0 0 10px rgba(255,255,255,0.5) for a glow effect.
- What is the difference between text-shadow and box-shadow?
- Text-shadow applies only to text content and follows the text shape, while box-shadow applies to the element's box. Text-shadow has no spread radius parameter. Text-shadow is useful for text legibility, glow effects, and 3D text; box-shadow creates depth for containers and cards.
- How do I create 3D text effects?
- Stack multiple text-shadows with incrementing offsets: text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb. Each layer adds depth. Combine with bold fonts and contrasting colors for dramatic 3D lettering effects.