CSS Text Shadow Generator

Design text shadows visually and copy the CSS.

Free CSS text-shadow generator. Adjust offset, blur, color and opacity with sliders, preview live sample text, and copy the text-shadow CSS. Runs entirely in your browser.

How to use the CSS Text Shadow Generator

  1. 01Set the horizontal and vertical offset.
  2. 02Adjust blur, color and opacity.
  3. 03Copy the text-shadow CSS.

Frequently asked questions

Can I make a glow effect?

Yes — set the offsets to zero and increase the blur with a bright color to create a glow instead of a drop shadow. The live preview shows the result instantly.