text-stroke – Konturschrift oder Outline

Mai 2025

text-stroke erzeugt eine Umrandung oder Kontur um jeden Buchstaben eines Textes und wirkt wie eine Outline- oder Konturschrift. Die Buchstaben können mit Farbe, einem Verlauf oder einem Hintergrundbild gefüllt werden.

text-stroke-color, text-stroke-width

text-stroke-color ist ein typischer Abkömmling des Print-Designs: eine Umrandung der einzelnen Zeichen eines Texts. Dazu muss das CSS die Strichstärke angegeben, z.B. 2px, 0.4em.

Konturen

.stroked {
	-webkit-text-stroke-color:green;
	text-stroke-color:green;
	-webkit-text-stroke-width:2px;
	text-stroke-width:1px;
}

text-fill-color – Text-Füllfarbe

Dann gibt es auch noch text-fill-color. Auch text-fill-color braucht noch den Präfix -webkit für Chrome, Edge, Opera, Firefox und Safari. Die Textfarbe color ist der Fallback für Browser, die text-fill-color nicht unterstützen.

Unterschied zwischen text-fill-color und color? … ¯\_(ツ)_/¯

Tatsächlich wird text-fill-color: transparent; gebraucht, um einen Verlauf oder Hintergrundbild in die Buchstaben des Textes zu setzen.

Nuancen

background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;