Generator Tools

CSS Text Stroke Generator

Generate outlined text CSS with a live preview. Adjust stroke color, width, and fill, then copy the text-stroke and text-shadow CSS.

Quick presets

Controls

Text

Technique

Webkit stroke is crisp but centers on the glyph edge. Shadow outline sits fully outside the fill and works in every modern browser. Stroke + shadow layers both for the best result.

Fill color

Stroke color

Stroke width2 px

Font size72 px

Font weightFont family

Preview background

Live preview

OUTLINE

The preview uses the exact CSS shown below. If the fill is transparent, only the outline is visible. Toggle the preview background to confirm the outline reads on light and dark surfaces.

CSS output

Copy the full rule, the text-shadow value, or a Tailwind class.

CSS rule

.outlined-text {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 2px #0b1220;
  text-stroke: 2px #0b1220;
  text-shadow: 2px 0px 0 #0b1220,
    1.73px 1px 0 #0b1220,
    1px 1.73px 0 #0b1220,
    0px 2px 0 #0b1220,
    -1px 1.73px 0 #0b1220,
    -1.73px 1px 0 #0b1220,
    -2px 0px 0 #0b1220,
    -1.73px -1px 0 #0b1220,
    -1px -1.73px 0 #0b1220,
    0px -2px 0 #0b1220,
    1px -1.73px 0 #0b1220,
    1.73px -1px 0 #0b1220;
}

text-shadow value

text-shadow: 2px 0px 0 #0b1220,
    1.73px 1px 0 #0b1220,
    1px 1.73px 0 #0b1220,
    0px 2px 0 #0b1220,
    -1px 1.73px 0 #0b1220,
    -1.73px 1px 0 #0b1220,
    -2px 0px 0 #0b1220,
    -1.73px -1px 0 #0b1220,
    -1px -1.73px 0 #0b1220,
    0px -2px 0 #0b1220,
    1px -1.73px 0 #0b1220,
    1.73px -1px 0 #0b1220;

The shadow ring layers multiple hard shadows around the glyph to fake an outside outline. Thicker widths use more layers so the edge stays smooth.

Tailwind class

[-webkit-text-stroke:2px_#0b1220] [paint-order:stroke_fill]

Underscores stand in for spaces per Tailwind's arbitrary-value syntax. Pair with a text color and size utility.

How to use

Type your text and pick a technique: Webkit stroke, Shadow outline, or Stroke plus shadow.
Choose the fill and stroke colors, or toggle a transparent fill for hollow or knockout text.
Adjust the stroke width, font size, weight, and family until the preview looks right.
Switch the preview background to check the outline on light and dark surfaces.
Copy the full CSS rule, the text-shadow value, or the Tailwind class.

About this tool

CSS Text Stroke Generator builds an outlined text effect from two complementary techniques and previews the exact CSS it will copy. The -webkit-text-stroke property paints a crisp stroke along each glyph edge and is supported across Chrome, Edge, Safari, and Firefox, but the stroke is centered on the outline, so half of it sits inside the fill. To create an outline that wraps fully around the glyph without thinning the fill, the tool can also generate a layered text-shadow ring: it places several hard shadows at evenly spaced angles, adding more layers for thicker widths so the edge stays smooth. Pick Webkit stroke for the cleanest single-property result, Shadow outline for the most compatible outside outline, or Stroke plus shadow to layer both. Set the fill and stroke colors with native color pickers or hex values, toggle a transparent fill for a hollow letter look, and tune the stroke width, font size, weight, and family. A transparent fill that matches the page background produces a knockout effect where only the colored outline shows. Switch the preview background between dark, light, gray, and blue to confirm the outline reads on any surface. Output includes the full CSS rule, the standalone text-shadow value, and a Tailwind arbitrary-value class. Everything is computed in your browser, so nothing you type is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Text Stroke Generator

How to use

About this tool

You may also like

CSS Text Shadow Generator

CSS Text Gradient Generator

CSS Box Shadow Generator