CSS Text Shadow Generator
Generate formatted CSS text-shadow rules with custom offsets, blur radius, and color.
Run tool
The CSS Text Shadow Generator creates ready-to-use CSS `text-shadow` declarations from your custom layout and styling values. By defining the horizontal offset, vertical offset, blur radius, and shadow color, you can build precise depth effects for headings, buttons, and callout typography across web interfaces.
Every numeric measurement is automatically formatted with pixel units and assembled into standard stylesheet syntax ending with a trailing semicolon. When specific fields are left blank, the generator applies sensible defaults: a 1px horizontal displacement, a 1px vertical displacement, a 2px blur radius, and a semi-transparent black tone (`#00000033`). You can supply positive, negative, or zero values for the offset coordinates to reposition the shadow in any direction or center it directly behind text elements. The color input accepts standard text notations, making it straightforward to match your exact design specifications.
Instructions
- Enter the horizontal displacement in the Offset X field, or leave it blank to use 1px.
- Enter the vertical displacement in the Offset Y field, or leave it blank to use 1px.
- Set the shadow blur radius in the Blur field, or leave it blank to use 2px.
- Type a color value into the Color field, or leave it blank to use #00000033.
- Run the generator to view and copy the resulting CSS declaration.
Examples
- Offset X: 2, Offset Y: 4, Blur: 6, Color: #333333 generates text-shadow: 2px 4px 6px #333333;
- Offset X: 0, Offset Y: 0, Blur: 10, Color: rgba(0, 0, 0, 0.45) generates text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.45);
FAQ
What happens if I omit all input fields?
The generator applies the default values: a 1px horizontal offset, a 1px vertical offset, a 2px blur radius, and color #00000033, outputting text-shadow: 1px 1px 2px #00000033;.
Can I use zero values for offsets and blur?
Yes. Entering 0 for Offset X, Offset Y, or Blur generates valid 0px declarations, which is useful for creating centered glow effects.
What formats can I enter in the Color field?
The color field accepts standard text representations, including hexadecimal strings (such as #333333 or #00000033), RGB/RGBA strings, or recognized CSS color names.