CSS text-shadow generator
Tune a shadow for a heading over a photo or text that needs more contrast, and copy the CSS line right away.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter horizontal offset, vertical offset, blur, shadow color (hex) and opacity.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
text-shadow: offset-x offset-y blur rgba(red, green, blue, opacity ÷ 100). Text shadows have no spread value and no inset.
Example
Inputs: Horizontal offset = 1 px, Vertical offset = 2 px, Blur = 4 px, Shadow color (HEX) = #000000, Opacity = 40 %. Result: CSS code: text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);.
#000000
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
Limits and caveats
- It builds one shadow layer; add more layers with commas in your CSS.
- A shadow does not replace enough contrast between text and background for readability.
Questions about this tool
How do I keep text readable over a photo?
Try a black shadow with a small offset, 4 to 8 px of blur and 40 to 60 percent opacity.
How do I make a glow around text?
Set both offsets to 0, raise the blur and pick a light color such as gold at high opacity.
Why is there no spread option?
CSS text-shadow accepts only the offsets, blur and color; spread belongs to box-shadow.