Offset, blur, and color combined into one shadow layer
A shadow offset 2px right and 3px down, with a 6px blur in dark navy (#0F172A), generates: text-shadow: 2px 3px 6px #0F172A; -- a soft, slightly offset shadow that reads as depth behind the text rather than a harsh, hard-edged duplicate.
The three numeric values each control a distinct aspect of the shadow: offset-x (2px) and offset-y (3px) control the shadow's direction and distance from the text, while the blur radius (6px) controls how soft versus sharp its edges appear -- a 0px blur would produce a crisp, hard-edged duplicate of the text instead of a soft shadow.
Positive offset-x and offset-y values (as used here) push the shadow to the right and downward respectively -- negative values would push it left and upward instead, which is the basis for creating shadow effects that appear to come from a light source positioned in a different direction.
Why this generates one layer, not a compound effect
Single layer. Stack extra shadows in your stylesheet if you need a glow plus a drop. CSS text-shadow actually supports multiple comma-separated shadow layers on a single piece of text -- a common technique for combining a soft glow (large blur, no offset) with a crisp drop shadow (small blur, some offset) on the same text simultaneously, which this generator's single-shadow output doesn't produce on its own.
To build that kind of compound effect, you'd take this generator's single-layer output and manually add a second, comma-separated text-shadow value in your stylesheet with different offset, blur, and color settings -- each additional layer stacks visually on top of the others.
Text shadow, unlike box-shadow, follows the actual glyph shapes of the text rather than a rectangular box -- which is exactly why it's used specifically for text effects (subtle depth, glow, or a raised/inset look on typography) rather than as a general-purpose shadow tool for arbitrary elements.
Related CSS visual-effect tools
For a shadow effect applied to a box rather than text specifically, a CSS box-shadow generator would be the more appropriate related tool, following similar offset-and-blur logic applied to rectangular elements instead of glyphs.
For a completely different soft-UI shadow technique using dual light/dark shadows on a matching-color surface, the CSS Neumorphism Generator is a related but distinct shadow-based effect.
Frequently Asked Questions (FAQ)
What does each of the three numeric values in text-shadow control?
Offset-x (2px) shifts the shadow horizontally, offset-y (3px) shifts it vertically, and blur (6px) controls how soft or sharp the shadow's edges appear -- a 0px blur produces a crisp, hard-edged duplicate rather than a soft shadow.
What would negative offset values do instead of positive ones?
Positive offset-x and offset-y push the shadow right and down (as in this example). Negative values would push it left and up instead -- useful for simulating a light source coming from a different direction than the default bottom-right placement.
Can I create a glow effect plus a drop shadow at the same time?
Single layer. Stack extra shadows in your stylesheet if you need a glow plus a drop. Not from this generator alone, which produces one shadow layer. CSS text-shadow supports multiple comma-separated layers -- add a second text-shadow value manually in your stylesheet (like a large-blur, no-offset glow alongside this generator's offset drop shadow) to combine both effects.
How is text-shadow different from box-shadow?
text-shadow follows the actual shape of the text glyphs themselves, not a rectangular bounding box -- which is why it's used specifically for typography effects (depth, glow, embossing) rather than as a general shadow tool for arbitrary rectangular elements.
Does a larger blur value always look better than a smaller one?
It depends on the intended effect -- a small blur (or 0) creates a crisp, defined shadow good for a subtle 3D or emboss look, while a larger blur creates a softer, more diffuse shadow better suited for a gentle depth or glow effect. Neither is universally better; it depends on the visual goal.
