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

[Canonical HTML page](https://gradiently.design/sv/guide/css-text-shadow)

text-shadow är en liten egenskap med stort rykte för att rädda oläsliga rubriker. Den är bättre på dekoration än på räddning. Här är syntaxen, en handfull stilar värda att kopiera och vad du ska använda när läsbarheten är det verkliga problemet.

## The short version

- CSS-egenskapen text-shadow tar en horisontell förskjutning, en vertikal förskjutning, en valfri suddighetsradie och en färg.
- Flera skuggor kan staplas på en och samma text genom att separera dem med kommatecken, och den som står först ritas överst.
- Till skillnad från box-shadow har text-shadow inget spridningsvärde och inget inset-nyckelord.
- Hårda förskjutna skuggor utan oskärpa är den mest användbara dekorativa stilen, från retrorubriker till långa skuggor.
- En mjuk mörk skugga är en svag lösning för text över en rörig bild; en scrim, en mörkare bild eller en lugnare bakgrund gör jobbet ordentligt.

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

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

Hela grammatiken på fem rader. Längder kan vara negativa för att kasta skuggan uppåt eller åt vänster.

| Del | Obligatorisk | Vad den gör |
| --- | --- | --- |
| Horisontell förskjutning | Ja | Positivt flyttar skuggan åt höger, negativt åt vänster |
| Vertikal förskjutning | Ja | Positivt flyttar den nedåt, negativt uppåt |
| Suddighetsradie | Nej | Standard är 0, en hård kant. Kan inte vara negativ |
| Färg | Nej | Standard är textfärgen, `currentcolor` |

Här finns ingen spridning och inget `inset`. De hör till [box-shadow](https://gradiently.design/sv/guide/css-box-shadow), som skuggar elementets ruta i stället för dess bokstäver.

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.

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

Fem stilar som fungerar. Den långa skuggan är bara samma hårda skugga upprepad en pixel längre varje gång.

Retroförskjutningar och långa skuggor behandlas visuellt i [retro-texteffekter](https://gradiently.design/sv/guide/retro-text-effect) och [3D-texteffekter](https://gradiently.design/sv/guide/3d-text-effect). 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](https://gradiently.design/sv/guide/outline-text) visar båda.

- Indigofärgade bokstäver: #1e1b4b
- Rosa förskjutning: #f472b6
- Gräddvita bokstäver: #fff7ed
- Orange första steget: #f97316
- Rostfärgat andra steget: #7c2d12

Färgerna bakom retro-exemplet och exemplet med dubbel förskjutning. Förskjutna skuggor fungerar bäst när skuggfärgen tydligt skiljer sig från bokstäverna, inte är en mörkare kopia av dem.

## 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](https://gradiently.design/sv/guide/color-contrast-accessibility).

### Skugga som kryckla

- Suddig svart gloria bakom vit text
- Misslyckas överallt där bilden är ljusast
- Kontrastverktyg rapporterar fortfarande fel
- Grumliga kanter på liten text

### Fixa bakgrunden

- En gradientscrim under orden
- Mörkna eller avmätta bilden
- Flytta texten till det lugnaste området
- Välj en bakgrund gjord för att bära ord

## 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](https://gradiently.design/sv/guide/css-gradient-overlay) går igenom lagringen i sin helhet.

Scrim i botten för bildtexter: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Mörk längst ner, klar två tredjedelar upp. Lägg den över ett foto och sätt bildtexten i den nedre tredjedelen.

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

Scrimen som översta bakgrundslager, fotot under. Ingen skugga behövs på texten.

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](https://gradiently.design/sv/guide/text-over-image) går igenom vart och ett med exempel.

Ett inlägg i stående format med en gräddvit rubrik som korsar en ljus fläck av gradienten och tappar kontrast

Ljusa ord över bakgrundens ljusaste del. En skugga skulle bara sudda ut problemet.

Samma inlägg i stående format där gradienten fördjupas bakom rubriken så att den läses tydligt

Bakgrunden fördjupas i stället bakom raden, så orden läses utan någon effekt på dem.

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](https://gradiently.design/sv/guide/css-gradient-text).

> **En skugga per drop-shadow()** `drop-shadow()` tar en skugga per funktion, men du kan kedja flera: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Var och en skuggar resultatet av den förra.

## 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.

## FAQ

### Vilken syntax har text-shadow i CSS?

`text-shadow: offset-x offset-y blur-radius color`, till exempel `2px 2px 4px #000`. Bara de två förskjutningarna är obligatoriska.

### Kan jag lägga till mer än en text-shadow?

Ja. Separera skuggorna med kommatecken. Den första i listan målas överst.

### Har text-shadow ett spridningsvärde?

Nej. Spridning och `inset` finns bara för `box-shadow`. För att göra en textskugga tjockare, stapla flera skuggor med små förskjutningar.

### Förbättrar text-shadow tillgängligheten?

Inte pålitligt. Kontrastkontroller ignorerar skuggor, så texten måste nå den kontrast som krävs mot sin bakgrund utan en.

### Hur gör jag vit text läsbar på ett foto utan text-shadow?

Lägg en mörk gradientscrim bakom textområdet, mörkna bilden eller placera orden över en lugn del av fotot.