Outline text CSS. Comics, logos, headlines.
🖋️ Preview

How to use

  1. Type text (English works best).
  2. Pick style (hollow/filled/double/3D).
  3. Set stroke width and color.
  4. Pick font (Impact recommended).
  5. Copy CSS or download PNG.

Key features

  • 4 styles (hollow / filled / double / 3D offset)
  • Stroke width 1–20 px
  • Independent stroke / fill colors
  • 5 presets
  • Uses -webkit-text-stroke

Use cases

  • YouTube thumbnails — outline text emphasis
  • Logos — vintage / street style
  • Comics / webtoons — SFX
  • Ad banners — bold outline headlines
  • T-shirts — simple, strong

text-stroke vs text-shadow

Two CSS techniques for outline text: (1) -webkit-text-stroke — real outline (99% browser support). (2) Stacked text-shadow — 8-direction shadows at 0 distance simulate an outline. Stroke wins for thick lines; shadow looks more natural at 1–2 px. This tool uses stroke by default.

FAQ

Hollow text invisible?

color: transparent + outline only. If stroke color matches background, it disappears. Use dark bg + bright stroke.

Other scripts?

Yes — works with any bold font.

Safari?

-webkit- prefix means Chrome + Safari supported.

Free?

Yes.