# Textskugga: när den hjälper och bättre alternativ

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

Släpskuggan är den vanligaste lösningen på oläsbar text och ett av de snabbaste sätten att få en design att se daterad ut. Här är när en skugga är rätt val, och vad du ska ta till resten av tiden.

## The short version

- En textskugga fungerar bäst som en medveten stil, till exempel en hård förskjuten skugga utan oskärpa, inte som lösning på dålig kontrast.
- Mjuka glöd och suddiga halos bakom bokstäverna gör kanterna otydliga och får ofta en design att se billig och daterad ut.
- En tunn, tät skugga är ett rimligt val för undertexter på rörlig video, där bakgrunden inte går att styra.
- För att göra text läsbar slår placering, ett gradientlager, en tonad bakgrund och en tyngre vikt oftast vilken skugga som helst.
- I CSS tar text-shadow en horisontell förskjutning, en vertikal förskjutning, en valfri oskärperadie och en färg, och accepterar flera skuggor åtskilda med kommatecken.

En **textskugga** hjälper i två lägen: som medveten stil, oftast en hård skugga förskjuten några pixlar utan oskärpa, och som tunn säkerhetskant på undertexter över rörlig video. Som räddning för ord som inte går att läsa på ett foto eller en gradient gör den oftast mer skada än nytta: mjuka skuggor och glöd suddar ut just de kanter ögat använder för att känna igen bokstäver, och de datar en design direkt. För läsbarhet: flytta orden till en lugnare yta, lägg på ett gradientlager, tona bakgrunden eller välj en tyngre vikt.

## Typer av textskuggeffekter

| Typ | Så ser den ut | Omdöme |
| --- | --- | --- |
| Hård förskjutning | En massiv kopia av bokstäverna förskjuten nedåt och åt höger, utan oskärpa | En stark stil: retro, lekfull, affischlik |
| Lång skugga | Många förskjutna kopior som bildar ett diagonalt block | En stil nära 3D-extrudering; använd på några få ord |
| Diskret släpskugga | Liten förskjutning, liten oskärpa, låg opacitet | Knappt synlig på de flesta skärmar; ofta meningslös |
| Tät kant för undertexter | Ingen eller liten förskjutning, kort oskärpa, mörk | Bra för undertexter över oförutsägbar video |
| Mjuk glöd eller halo | Ett brett, suddigt färgmoln runt varje bokstav | Undvik: smetar ut bokstäverna och ser billigt ut |

Bara de två första är designval. De två i mitten är verktyg. Den sista är en vana värd att bryta.

## När en textskugga hjälper

### Som hård, förskjuten stil

En skugga utan oskärpa, förskjuten några procent av bokstavshöjden och satt i en kontrasterande färg ur paletten, är en typografisk stil med lång historia på affischer, förpackningar och skyltar. Den läses som självsäker och lite nostalgisk. Behandla den som vilken effekt som helst: en per design, några stora ord, ett kraftigt typsnitt. [Texteffekter](https://gradiently.design/sv/guide/text-effects) jämför den med de andra behandlingarna. [Retro-texteffekter](https://gradiently.design/sv/guide/retro-text-effect) visar dess nära släktingar, dubbeln och spåret.

### Bakom undertexter på video

Undertexter ligger över material som ändras varje bildruta, så du kan inte välja en lugn yta. En tät, mörk skugga eller en tunn kontur gör att vita undertexter går att läsa när ett ljust fönster passerar bakom dem. Håll den nära bokstäverna: kort oskärpa och liten eller ingen förskjutning. [Design av videoundertexter](https://gradiently.design/sv/guide/video-captions-design) tar upp storlek och placering.

## När en textskugga stjälper

Problemet med att använda en skugga för att lösa kontrast är att den behandlar symptomet. Bakgrunden är fortfarande stökig; du har bara lagt en smet runt bokstäverna. Mjuka glöd är värst, eftersom de sprider ett suddigt moln utanför varje bokstav och mjukar upp kanten som definierar formen. I sociala inlägg komprimeras de dessutom dåligt och blir fläckiga band.

### Skuggan som kryckor

- Mjuk svart glöd på vit text över ett foto
- Färgad halo runt en rubrik
- Skugga på liten brödtext
- Flera olika skuggor i en och samma design
- Skugga plus kontur plus glöd på ett ord

### Bättre val

- Flytta orden till den lugnaste ytan
- Ett gradientlager längs ena kanten av bilden
- Större, tyngre text för den lilla raden
- En enhetlig stil genom hela serien
- En behandling, vald med avsikt

## Bättre alternativ till en textskugga

1. **Flytta orden** Hitta bakgrundens lugnaste, jämnaste yta och lägg texten där. Det löser de flesta problem innan de uppstår.
2. **Lägg på ett gradientlager** En mjuk övertoning från mörkt till genomskinligt längs ena kanten ger kontrast utan synlig form. [Läsbar text på foton](https://gradiently.design/sv/guide/readable-text-on-photos) har koder för gradientlager.
3. **Lugna bakgrunden** Tona ett foto i en eller två färger, sänk dess högdagrar eller välj en gradient med en lugnare yta.
4. **Stärk typen** Gå upp en vikt och en storlek. En fet sans i generös storlek behöver ingen hjälp på de flesta bakgrunder.
5. **Byt bläck** Ibland slår mörk text på en ljus yta vit text med skugga. Välj bläck per rad i stället för för hela designen.

Ett stående inlägg med texten Öppet sent där bakgrunden varierar ojämnt bakom bokstäverna

Ord över en stökig del av bakgrunden: det är här folk tar till en glöd.

Samma inlägg med rena bokstäver utan skugga, satta över en lugn yta av gradienten

Samma ord med bakgrunden lugnad bakom dem. Ingen skugga behövs, och bokstäverna förblir skarpa.

På gradienter blir underlaget ofta ljusare eller mörkare över ytan, så en enda bläckfärg passar inte varje rad. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) visar hur du planerar för det, och [text på stökiga bakgrunder](https://gradiently.design/sv/guide/type-on-busy-backgrounds) tar upp mönster och texturer.

## Textskugga i CSS

CSS-egenskapen `text-shadow` tar en horisontell förskjutning, en vertikal förskjutning, en valfri oskärperadie och en färg. Skilj flera skuggor åt med kommatecken; den först angivna ligger överst. Använd `em`-enheter så att skuggan skalar med teckenstorleken. Hela referensen finns på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Två skuggor värda att ha, och gradientlagret som ersätter resten.

Automatiska kontrastkontroller jämför textfärgen med bakgrundsfärgen och ignorerar skuggan. Om ett verktyg flaggar din text för låg kontrast kan en skugga få den att se bättre ut på din skärm men ändrar inte mätvärdet. Åtgärda bakgrunden eller bläcket i stället. [CSS-textskugga](https://gradiently.design/sv/guide/css-text-shadow) har fler recept för webben.

## Så hanterar Gradiently läsbarhet

Gradiently bygger på idén att ord inte ska behöva räddas. En Mark vet var orden finns: dess lugnaste, mest kontrastrika yta flyttar sig bakom texten, färger nära bokstäverna fördjupas eller ljusnar och stökiga detaljer dämpas. Auto-bläck väljer sedan ljus eller mörk text för varje rad ur Markens egen palett. Inga rutor, skuggor eller oskärpa är inblandade, och du väljer hur kraftigt Marken svarar. Vill du ha djup som stil ger letteringeffekten Extrudering djupa bokstäver i Markens färger och Dubbel ritar öppna bokstäver två gånger, båda skarpa och fria från oskärpa.

## FAQ

### Ska jag använda en textskugga för att göra text läsbar?

Oftast inte. Placering, ett gradientlager, en lugnare bakgrund eller en tyngre vikt gör text läsbar utan att bokstäverna blir suddiga.

### Vad är en hård skugga på text?

En kopia av bokstäverna förskjuten nedåt och åt ena sidan utan oskärpa, oftast i en kontrasterande färg. Det är en medveten stil som syns på affischer och förpackningar.

### Hur lägger jag till en textskugga i CSS?

Använd `text-shadow: 0.06em 0.06em 0 #9a3412;` där värdena är horisontell förskjutning, vertikal förskjutning, oskärperadie och färg.

### Förbättrar en textskugga kontrasten för tillgänglighet?

Automatiska kontrollverktyg jämför textfärgen med bakgrunden och ignorerar skuggan, så en skugga rättar inte till ett underkänt förhållande. Åtgärda bakgrunden eller bläcket.

### Varför ser glödande texteffekter billiga ut?

En glöd sprider ett suddigt moln runt varje bokstav, mjukar upp kanterna och ger ofta bandning när bilden komprimeras.