Handitab

CSS Text Shadow

Generate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.

About CSS Text Shadow

The CSS text-shadow property adds a shadow to the glyphs of text from a horizontal offset, a vertical offset, an optional blur radius, and a color. Unlike box-shadow, it has no spread value and no inset keyword. This generator builds one shadow from sliders and previews it on sample text. Several shadows can be combined by separating them with commas, which is how outline and glow effects are made.

How to use CSS Text Shadow

  1. Fill in "Offset X", "Offset Y", "Blur" and "Shadow color".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Text Shadow

Can text-shadow create an outline around text?

Roughly. Four shadows offset by one pixel in each direction with zero blur give a thin outline. For a cleaner result, the -webkit-text-stroke property draws a real stroke and is supported by current browsers.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.Darken ColorDarken a color by a chosen percentage by lowering its HSL lightness, and get the darker shade as HEX, RGB, and HSL codes.EM to PXConvert em units to pixels by multiplying by the font size of the element (16px by default), with rem, pt, and vw results as well.Flexbox PlaygroundTry CSS flexbox properties such as flex-direction, justify-content, align-items, flex-wrap, and gap on sample items and copy the CSS.Glassmorphism GeneratorGenerate CSS for a frosted glass (glassmorphism) effect by setting blur, background opacity, tint color, and corner radius with a preview.Greyscale/Desaturate a ColorConvert a color to greyscale by setting its HSL saturation to zero, and get the resulting grey as HEX, RGB, and HSL codes.