Filled Outline

Outline & Stroke · Static · pure CSS

A solid fill with a thick contrasting stroke via -webkit-text-stroke and paint-order. Comic-cover legibility with independent fill and stroke colors.

Open in the generator →All effects
Filled Outline

CSS

/* Filled Outline — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: hsl(30 92% 62%);
  -webkit-text-fill-color: hsl(30 92% 62%);
  -webkit-text-stroke: 2.5px hsl(285 80% 22%);
  paint-order: stroke fill;
}

Pure CSS — just add the .text-effect class to any element.

Category
Outline & Stroke
Type
Static
Browser support
-webkit-text-stroke + paint-order (all modern, prefixed)
Capabilities
pure

Related Outline & Stroke effects