CSS text-shadow: syntax, exempel och bättre alternativ

En CSS text-shadow skrivs text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): en horisontell förskjutning, en vertikal förskjutning, en valfri suddighetsradie och en färg. Separera flera skuggor med kommatecken för att stapla dem. Den är utmärkt för dekorativa effekter som skarpa förskjutna rubriker, långa skuggor och falska konturer. Den är ett dåligt verktyg för att göra text läsbar över ett rörigt foto, och de bättre alternativen för det finns längre ner.

text-shadow-syntax

/* 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; }

Skuggan målas bakom texten och tar form av varje tecken, inklusive understrykningar och dekorationer. Den ändrar inte layouten: en stor förskjutning kan sticka ut utanför elementet och överlappa grannar utan att knuffa bort dem, så lämna utrymme med utfyllnad om skuggan är stor.

Text-shadow-exempel värda att kopiera

Stilarna som håller är de med hårda kanter. En skugga utan oskärpa läses som ett medvetet grafiskt val; en mjuk grå oskärpa under brödtext tenderar att läsas som ett misstag.

/* 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); }

Retroförskjutningar och långa skuggor behandlas visuellt i retro-texteffekter och 3D-texteffekter. För en ren kontur, föredra -webkit-text-stroke med paint-order: stroke fill framför det gamla tricket med fyra skuggor vid varje hörn, som lämnar luckor på kurvor; konturtext visar båda.

Varför en mjuk skugga är en svag lösning för läsbarhet

Det vanliga bruket av text-shadow är en mörk oskärpa bakom vit text över ett foto, i hopp om att skilja de två åt. Den hjälper lite vid kanterna på varje bokstav och gör ingenting för utrymmet inuti dem, där fotot fortfarande syns med full styrka. Skruva upp oskärpan och opaciteten tills det fungerar så får du en fläck runt varje ord. Sken runt text, ljusa eller mörka, ser daterade ut och misslyckas ändå på bildens ljusaste partier.

Kontrastverktyg ignorerar dessutom skuggor. De mäter textfärgen mot bakgrundsfärgen, så en rubrik som bara klarar sig tack vare sin skugga flaggas i en granskning, och med rätta. Tröskelvärdena finns i färgkontrast och tillgänglighet.

Bättre alternativ för text på bilder och gradienter

En scrim är en gradient som bara mörkar den del av bilden som ligger bakom texten, och tonar ut till ingenting på andra ställen. Den håller fotot ljust där det spelar roll och ger varje bokstav samma lugna underlag. Gradientöverlägg i CSS går igenom lagringen i sin helhet.

.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;
}

Andra pålitliga alternativ: kör bilden genom filter: brightness(0.75) på ett eget lager, beskär så att orden hamnar på himmel eller vägg i stället för detaljer, eller sätt texten på ett fast band. Text över bilder går igenom vart och ett med exempel.

Det här är precis vad Gradiently-Marks gör av sig själva: det lugnaste området flyttar sig bakom dina ord och Auto-bläck väljer ljus eller mörk text rad för rad, utan skugga, ruta eller oskärpa. När du vill ha skugga som dekoration i stället för reparation ger dess bokstavsbehandlingar som Extrudering, Dubbel och Spår dig förskjutna stilar utan att du skriver en enda skugga.

Text-shadow på gradienttext

Gradienttext görs med background-clip: text och en genomskinlig textfärg. Lägg till en text-shadow på den så syns skuggan rakt igenom de genomskinliga bokstäverna och grumlar gradienten inifrån. Lösningen är att skugga elementet i stället: filter: drop-shadow(3px 3px 0 #1e1b4b) följer bokstävernas målade form och ligger bakom dem. Själva tekniken beskrivs i gradienttext i CSS.

Prestanda och animation

Hårda skuggor är billiga. Stora oskärperadier på långa textpartier kostar mer att måla, och att animera text-shadow målar om texten vid varje bildruta. Om du vill att en rubrik ska animeras, flytta den med transform och låt skuggan ligga still.