Typography & Buttons · Free generator

CSS Text Stroke Generator

Free · no sign-up Live preview · copy or download the CSS

Outlined display type — filled letters with a contour, or fully hollow — via text-stroke, with the paint-order fix included so thick strokes don't eat your letterforms.

Settings

OUTLINE
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS Text StylingDisplay typography fundamentals.STEP 2 · 15 minCSS Fonts & Web FontsChoosing stroke-friendly faces.STEP 3 · 15 minCSS ColorsContrast for outlined type.


  1. CSS Text Gradient GeneratorTypography & Buttons
  2. CSS Neon Text GeneratorShadows & Effects
  3. CSS Text Shadow GeneratorShadows & Effects
  4. CSS Font Pairing ToolTypography & Buttons
  5. CSS Button GeneratorTypography & Buttons


How it works


-webkit-text-stroke draws a contour along the glyph outline. The prefixed name is universal in practice — every modern browser supports it despite the prefix. The crucial companion is paint-order: stroke fill: strokes center on the outline by default, so thick ones eat inward; painting stroke first keeps letterforms intact.


Hollow text (transparent fill) is the signature use — huge display type that reads as drawn rather than printed. Pair it with a filled duplicate for layered hero compositions.


Run the code — try it yourself
Make the headline hollow: 2px #20242A stroke, transparent fill — then try a 4px white stroke with orange fill on the colored body.


exercise.html — editable


Frequently asked questions
Bold or thin fonts for stroking?
Bold, geometric faces survive stroking best; thin fonts close up. Bump the weight before bumping the stroke.
Can the stroke be a gradient?
Not directly — but stroke a transparent-filled text over a gradient background-clip text layer for the effect; the Text Gradient Generator has the base technique.
Does this work for body text?
Legibility suffers below display sizes — treat it as a headline effect.


Keep going
Outlined type is volume control for headlines — presence without weight. Combine with the Text Gradient Generator for layered hero type.
CSSmatic is a non-profit project, made by developers for developers.