CSS text shadow generator
Type your own words, set offset, blur, color and opacity and stack up to four shadows for glows, outlines and 3D looks. Copy the rule when it looks right.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Type the words you want to preview and pick text and background colors.
- Set offset, blur, color and opacity for the first layer.
- Press Add layer to stack more shadows, up to four.
- Press Copy and paste the rule.
What the output means
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); puts a half-transparent black shadow 2px to the right and 2px down, softened by 4px of blur. Several layers are separated by commas; the first one is drawn on top.
Example
A neon glow: 0 0 8px #ffffff, 0 0 20px rgba(255, 0, 128, 0.8), a tight white halo with a wider pink one behind it.
Tips
- Keep the preview colors close to the ones you use on your page, because a shadow looks different on dark and light backgrounds.
- A shadow of 0 blur and 1px offset can imitate a thin outline on one side.
Frequently asked questions
How do I make a glow?
Set both offsets to 0, use a blur of 10 to 20 pixels and a bright color such as the text color itself. Add a second layer with a larger blur to strengthen it.
How do I get a hard 3D or retro look?
Use several layers with no blur and offsets that grow by one or two pixels each, for example 1px 1px, 2px 2px and 3px 3px in a darker color.
Is there a spread value like in box-shadow?
No. The text-shadow property has only offset, blur and color, so the tool offers no spread.
Does the shadow affect readability?
It can. Strong or colorful shadows reduce contrast for small text. A soft, dark, low-opacity shadow is the safest way to help light text on a busy image.