CSS Text Shadow Generator
Style a text-shadow with sliders for offset, blur, color, and opacity — with a live preview and copy-ready CSS.
Shadow text without trial and error
A well-judged text shadow adds depth to headings and keeps light text legible over photos, but it's fiddly to tune in code — you edit four values, save, refresh, repeat. This generator makes it visual: drag the horizontal and vertical offsets, the blur radius, the opacity, and the color, and watch the sample text update instantly.
For readability over an image, keep the offsets small and the blur soft with modest opacity; for a bold display
effect, push the offset and darken the color. When it looks right, copy the single-line text-shadow
declaration straight into your stylesheet.
Copy-ready CSS
The output updates live and never leaves your browser.
Frequently Asked Questions
What are the values in text-shadow?
text-shadow takes horizontal offset, vertical offset, blur radius, and color: text-shadow: 2px 2px 4px rgba(0,0,0,0.3). Positive offsets push the shadow right and down.
How do I make text more readable over an image?
A subtle dark shadow with a few pixels of blur and low opacity lifts light text off a busy background without looking heavy. Avoid large offsets, which read as a drop shadow.
Can I add multiple text shadows?
Yes — CSS allows comma-separated shadows for glow or outline effects. This generator focuses on a single clean shadow that covers the most common needs.
Is this generator free and private?
Yes. The CSS is generated in your browser with no sign-up and nothing uploaded.
Want a polished, fully-designed interface? Let’s build it together.