CSS text-shadow: syntaxis, voorbeelden en betere opties

Een CSS text-shadow schrijf je als text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): een horizontale verschuiving, een verticale verschuiving, een optionele blurstraal en een kleur. Scheid meerdere schaduwen met komma’s om ze te stapelen. Het is uitstekend voor decoratieve effecten zoals scherp verschoven koppen, lange schaduwen en nepranden. Het is een slecht middel om tekst leesbaar te maken over een drukke foto, en de betere opties daarvoor staan verderop.

text-shadow-syntaxis

/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }

De schaduw wordt achter de tekst getekend en neemt de vorm van elk teken aan, inclusief onderstrepingen en decoraties. Hij verandert de layout niet: een grote verschuiving kan buiten het element lopen en buren overlappen zonder ze weg te duwen, dus laat ruimte met padding als de schaduw groot is.

Voorbeelden van text-shadow om te kopiëren

De stijlen die standhouden zijn de scherpe. Een schaduw zonder blur leest als een bewuste grafische keuze; een zachte grijze blur onder lopende tekst leest eerder als een fout.

/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }

Retroverschuivingen en lange schaduwen komen visueel aan bod in retro-teksteffecten en 3D-teksteffecten. Voor een nette omlijning kies je -webkit-text-stroke met paint-order: stroke fill boven de oude truc van vier schaduwen op elke hoek, die gaten laat op bochten; omlijnde tekst toont beide.

Waarom een zachte schaduw een zwakke leesbaarheidsoplossing is

Het gangbare gebruik van text-shadow is een donkere blur achter witte tekst over een foto, in de hoop de twee te scheiden. Het helpt een beetje aan de randen van elke letter en doet niets voor de ruimte erin, waar de foto nog op volle sterkte doorschijnt. Duw de blur en dekking op tot het werkt en je krijgt een veeg rond elk woord. Gloeden rond tekst, licht of donker, zien er gedateerd uit en falen nog steeds op de helderste delen van het beeld.

Contrastcontroles negeren schaduwen ook. Ze meten de tekstkleur tegen de achtergrondkleur, dus een kop die alleen slaagt dankzij zijn schaduw wordt in een audit afgekeurd, en terecht. De drempels staan in kleurcontrast en toegankelijkheid.

Betere opties voor tekst op afbeeldingen en verlopen

Een scrim is een verloop dat alleen het deel van de afbeelding achter de tekst verdonkert en elders naar niets vervaagt. Hij houdt de foto helder waar het ertoe doet en geeft elke letter dezelfde rustige ondergrond. Verloopoverlays in CSS behandelt het lagen volledig.

.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Andere betrouwbare opties: haal de afbeelding op een eigen laag door filter: brightness(0.75), snij zo bij dat de woorden op lucht of muur vallen in plaats van op details, of zet de tekst op een effen balk. Tekst over afbeeldingen loopt elk met voorbeelden door.

Dit is precies het werk dat de Marks van Gradiently zelf doen: het rustigste gebied verplaatst zich achter je woorden en Auto-inkt kiest regel voor regel lichte of donkere letters, zonder schaduw, vak of blur. Wil je schaduw als decoratie in plaats van reparatie, dan geven de lettering-behandelingen zoals Extrusie, Dubbel en Spoor je verschoven stijlen zonder één schaduw te schrijven.

Text-shadow op verlooptekst

Verlooptekst wordt gemaakt met background-clip: text en een transparante tekstkleur. Voeg er een text-shadow aan toe en de schaduw schijnt recht door de transparante letters, wat het verloop van binnenuit vertroebelt. De oplossing is in plaats daarvan het element te beschaduwen: filter: drop-shadow(3px 3px 0 #1e1b4b) volgt de getekende vorm van de letters en ligt erachter. De techniek zelf staat in verlooptekst in CSS.

Prestaties en animatie

Harde schaduwen zijn goedkoop. Grote blurstralen op lange stukken tekst kosten meer om te tekenen, en text-shadow animeren tekent de tekst bij elk frame opnieuw. Wil je een kop laten animeren, verplaats hem dan met transform en houd de schaduw vast.