# Genomskinliga gradienter i CSS: gradienter, överlägg och scrims

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

En gradient som tonar ut till ingenting är ett av de mest användbara verktygen i CSS. Förr lämnade den också en grå fläck i mitten. Här är hur transparens i gradienter fungerar nu, och mönstren som är värda att behålla.

## The short version

- För att göra en CSS-gradient genomskinlig använder du en färg med noll alfa som ett av stoppen, till exempel transparent eller rgb(124 58 237 / 0).
- Moderna webbläsare interpolerar gradientfärger med förmultiplicerad alfa, så att tona en färg mot nyckelordet transparent ger inte längre ett grått band.
- En bakgrundsgradient kan bara tona bakgrunden; för att tona ett elements faktiska innehåll använder du mask-image med en gradient.
- En scrim med flera mjukt avtagande stopp ser jämnare ut än en tvåstoppsgradient, som visar en tydlig kant där mörkläggningen slutar.
- En radiell gradient som är genomskinlig i mitten och mörk utanför ger en spotlight som drar blicken till ett område.

För att göra en **CSS-gradient genomskinlig** ger du ett av dess stopp en färg med noll alfa: `linear-gradient(to bottom, #7c3aed, transparent)` tonar violett till ingenting, så att det som ligger under syns igenom. Samma idé fungerar för gradienter i slutet av text, mörka scrims bakom bildtexter och färgade överlägg på foton. Vill du tona ett elements innehåll i stället för dess bakgrund använder du `mask-image` med en gradient.

## Sätt att skriva en genomskinlig färg

| Du skriver | Betyder | Använd den när |
| --- | --- | --- |
| `transparent` | Svart med noll alfa | Du tonar ut vilken färg som helst, i moderna webbläsare |
| `rgb(124 58 237 / 0)` | Den här violetten med noll alfa | Du vill vara tydlig, eller stödja mycket gamla webbläsare |
| `rgb(124 58 237 / 0.4)` | Den här violetten med 40 procent | En ton som aldrig försvinner helt |
| `#7c3aed66` | Åttasiffrig hex, ungefär 40 procent | Designverktyg som exporterar hex med alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | En variabels färg med 40 procent | Färger som lagras i anpassade egenskaper |

Fem sätt att uttrycka samma sorts sak. Formen `color-mix()` är den enda som fungerar på en färg du bara känner som variabel; se [color-mix() i CSS](https://gradiently.design/sv/guide/css-color-mix).

## Varför gradienter förr blev grå

Nyckelordet `transparent` är svart med noll alfa. Tidiga webbläsare blandade kanalerna för rött, grönt och blått och alfakanalen var för sig, så en gradient från vitt till `transparent` passerade halvgenomskinligt grått på vägen. Därför insisterar äldre handledningar på `rgba(255, 255, 255, 0)` i stället.

Specifikationen kräver nu förmultiplicerad alfa: varje färg vägs med sin opacitet före blandningen, så ett helt genomskinligt stopp bidrar inte med någon färg alls. Alla aktuella webbläsare gör så. Att skriva den matchande färgen med noll alfa är fortfarande en ofarlig vana, och den håller dig trygg i e-postklienter och gamla WebViews.

### Gammalt beteende

- Vitt till `transparent` dippar genom grått
- Färgkanaler blandas utan hänsyn till opacitet
- Lösning: upprepa färgen med noll alfa

### Aktuella webbläsare

- Vitt till `transparent` förblir vitt när det tonar ut
- Förmultiplicerad alfa, som specifikationen kräver
- Båda formerna fungerar; den tydliga är mer portabel

- Violett som tonar ut: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Blågrönt som tonar ut vid 70 procent: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Orange sken mot ingenting: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Tre gradienter visade över sidans egen bakgrund, vilket är precis vad de gör i din layout. Lägg gradienter som dessa över en grundfärg för att bygga mjuka, lagrade bakgrunder.

Var gradienten slutar spelar lika stor roll som färgerna. Ett stopp vid 70 procent avslutar gradienten tidigt och lämnar resten av rutan helt klar, vilket är perfekt för en ton som bara ska röra en kant. Två stopp på samma position ger ett hårt snitt från färg till ingenting, användbart för halvfyllda staplar och delade bakgrunder. Stoppositioner förklaras i [CSS linjära gradienter](https://gradiently.design/sv/guide/css-linear-gradient).

## Tona innehåll med mask-image

En bakgrundsgradient ligger bakom innehållet, så den kan inte tona text, bilder eller en rullande lista. En mask kan. Med `mask-image` håller gradientens täckande delar elementet synligt medan de genomskinliga delarna döljer det. Maskens färg spelar ingen roll, bara dess alfa.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Masker tonar vad som än finns där, på vilken sidfärg som helst, ljus eller mörk. `mask-image` utan prefix fungerar i aktuella webbläsare; lägg till `-webkit-mask-image` för äldre Safari.

Det gamla alternativet var en vit gradient lagd över innehållet. Den går sönder så fort sidan inte är vit, till exempel i [mörkt läge](https://gradiently.design/sv/guide/dark-mode-design), och den blockerar klick om du inte kommer ihåg `pointer-events: none`. En mask har inget av problemen.

## Scrims: genomskinliga gradienter för text

En scrim mörkar en del av en bild så att texten på den går att läsa, och tonar ut till helt genomskinlig så att resten av fotot förblir ljust. En tvåstoppsgradient fungerar, men dess raka ramp lämnar en synlig linje där mörkläggningen slutar. Fler stopp, utspridda så att de mjukas av, döljer kanten.

Mjukad scrim, sju stopp: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

Opaciteten faller snabbt nära texten och långsamt nära toppen, vilket läses som naturlig skugga i stället för ett band.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

Scrimen är det första bakgrundslagret, så den ligger ovanpå fotot.

Färga scrimen med en mörk variant av fotots färg i stället för rent svart så känns den som en del av bilden. På ett varmt solnedgångsfoto sjunker en mörk brun som `rgb(41 20 8 / 0.75)` in i bilden, medan svart skulle se ut som ett filter lagt ovanpå. [Gradientöverlägg i CSS](https://gradiently.design/sv/guide/css-gradient-overlay) går igenom färggradienter och blandlägen, och [text över bilder](https://gradiently.design/sv/guide/text-over-image) går igenom placering.

## Genomskinliga hål och spotlights

Vänd på idén: genomskinligt i mitten, mörkt utanför. En [radiell gradient](https://gradiently.design/sv/guide/css-radial-gradient) lagd över en sida eller bild lämnar ett område upplyst och dämpar tyst allt annat, vilket passar introduktionstips, närbilder på produkter och bildspel.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Sätt `--x` och `--y` från JavaScript för att flytta spotlighten. Övergången på 80 pixlar mellan stoppen håller kanten mjuk.

Ett produktinlägg i stående format där rubriken ligger över ett ljust område av gradienten

Utan någon formning konkurrerar orden med bakgrundens ljusaste del.

Samma produktinlägg med ett lugnare, djupare område av gradienten bakom rubriken

Bakgrunden dämpar sig själv bakom orden, samma jobb som en scrim gör på en webbplats.

För sociala inlägg och tryck behöver du sällan bygga scrims för hand. I Gradiently gör Marken själv plats för dina ord, fördjupar eller lyfter färgerna nära bokstäverna, utan något överläggslager att trimma för varje storlek.

## FAQ

### Hur får jag en CSS-gradient att tona ut till transparent?

Använd en färg med noll alfa som sista stopp: `linear-gradient(#7c3aed, transparent)` eller, för att vara tydlig, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Varför ser min gradient till transparent grå ut?

Äldre webbläsare blandar utan förmultiplicerad alfa, så `transparent` (genomskinligt svart) gråar mitten. Tona i stället till din färg med noll alfa.

### Hur tonar jag ut text eller en bild med CSS?

Använd `mask-image` med en gradient, till exempel `mask-image: linear-gradient(#000 60%, transparent)`. Elementet tonar ut mot vilken bakgrundsfärg som helst.

### Vad är en scrim i CSS?

En gradient som mörkar en del av en bild bakom text och tonar ut till genomskinlig på andra ställen, så att texten går att läsa och bilden förblir ljus.

### Kan en CSS-gradient ha ett genomskinligt hål?

Ja. En radiell gradient som är genomskinlig i mitten och mörk längre ut ger en klar spotlight över det som ligger under.