# Iriserende gradienter: perlemorsfarver med koder

[Canonical HTML page](https://gradiently.design/da/guide/iridescent-design)

Iriserende er den stille fætter til holografisk: en perle, en sæbeboble, indersiden af en musling. Her er farverne, koderne og reglerne, der får det til at ligne en overflade og ikke en regnbue.

## The short version

- En iriserende gradient blander flere lyse, nært beslægtede nuancer, typisk lilla, mint, rosa, himmelblå og creme, så overfladen ser ud til at skifte farve, når du kigger hen over den.
- Iriserende adskiller sig fra holografisk design i styrke: holografisk kører hele regnbuen ved høj mætning, mens iriserende er blød, lys og for det meste neutral.
- Perlemorseffekten kommer fra en lys bund, lav mætning, ét hvidt højlys og nuancer, der ligger side om side på farvehjulet.
- Mørk iridescens, som en oliefilm eller et billeskjold, bruger samme idé på en næsten sort bund med dyb turkis, violet og bronze.
- Tekst på en iriserende baggrund kræver et roligt, jævnt område bag sig, for lyse, skiftende nuancer giver svag kontrast til lys skrift og urolig kontrast til mørk skrift.

En **iriserende gradient** er en blanding af lyse nuancer, der ligger tæt på hinanden, typisk lilla, mint, lyserød, himmelblå og en varm creme, lagt over en lys bund med et blødt hvidt højlys. Effekten efterligner ægte iriserende ting: perler, sæbebobler, indersiden af en abalone-skal. Farverne er milde og skifter gradvist hen over overfladen, så det læses som en glans og ikke som en farvestribe. Koderne nedenfor er klar til at indsætte i CSS eller et hvilket som helst designværktøj, der forstår hex.

## Koder til iriserende gradienter

Hver af dem starter fra en næsten hvid eller næsten sort bund og lægger nuancer til, der ligger tæt på hinanden. Kopiér en, som den er, eller byt et enkelt stop ud for at gøre den til din.

- Perle: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opal: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Sæbeboble: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Oliefilm: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Billeskjold: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Fire lyse iriserende blandinger og to mørke. Alle seks holder nuancerne tæt på hinanden i styrke, og det er det, der forhindrer dem i at læses som en regnbue.

Læg mærke til, hvad de lyse har til fælles: intet stop er fuldt mættet, og det lyseste punkt er rent eller næsten rent hvidt. Skub et vilkårligt stop op til en stærk farve, og perlen bliver til en [pastelgradient](https://gradiently.design/da/guide/pastel-gradients) eller, endnu længere, til en regnbue.

## Iriserende mod holografisk

Folk bruger ofte de to ord om det samme, men i design beskriver de forskellige looks. Holografisk efterligner folieklistermærker og hologrammer på kreditkort: alle nuancer, høj mætning, hårde bånd. Iriserende efterligner naturlige overflader, der skifter farve stille. Vil du have den højere version, dækker [holografiske gradienter](https://gradiently.design/da/guide/holographic-gradients) den fuldt ud.

| Egenskab | Iriserende | Holografisk |
| --- | --- | --- |
| Mætning | Lav, lyse nuancer | Høj, hele regnbuen |
| Bund | Næsten hvid eller næsten sort | Ofte sølv eller selve farverne |
| Overgange | Lange og bløde | Korte, ofte med bånd |
| Forbillede i virkeligheden | Perle, musling, sæbeboble, olie på vand | Folie, klistermærker, sikkerhedshologrammer |
| Stemning | Rolig, raffineret, hudpleje, brude | Legende, højlydt, Y2K, musik |

Den hurtigste test: skel med øjnene. Ser du stadig tydelige nuancer, er den holografisk. Ser du en blød, lys overflade med et strejf af farve, er den iriserende.

## Sådan bygger du en iriserende gradient fra bunden

1. **Vælg bunden** Lys iridescens starter fra hvid eller en svagt varm råhvid som `#fbf9f6`. Mørk iridescens starter fra en blåsort som `#0d0f1a`. Bunden skal dække en tredjedel af overfladen eller mere.
2. **Vælg tre til fem nabonuancer** Gå rundt på farvehjulet i små skridt: lilla til himmel til mint til creme til lyserød. Hold dem på samme lysstyrke, så ingen springer frem.
3. **Sæt mætningen ned** Hvis en nuance ligner en farve, du kunne navngive fra den anden side af rummet, er den for stærk. Til lyse versioner skal du sigte efter nuancer, der mest er hvide med et spor af farve.
4. **Tilføj ét højlys** En lille hvid radial plet, forskudt mod et hjørne, fortæller øjet, hvor lyset kommer fra. Ét er nok; to begynder at ligne en blank knap.
5. **Slut af med fint korn** Lyse blandinger får let bånd på skærme. En smule støj bryder trinene op, hvilket [gradientbanding](https://gradiently.design/da/guide/gradient-banding) forklarer sammen med løsningen.

Det trin, der betyder mest, er det tredje. De fleste iriserende design, der fejler, er simpelthen for farverige. Ægte perlemor er overvejende hvid; farven er noget, du lægger mærke til bagefter.

- Skalhvid: #fbf9f6
- Lilla glans: #ece6f6
- Mintglans: #dff3f4
- Himmelglans: #e4ecf7
- Rosa glans: #fbe7f0
- Cremeglans: #fff6e0
- Grafitblæk: #3d3a4a

En fungerende iriserende farvepalet: en bund, fem glans og ét mørkt blæk til skrift. Blækket giver de lyse farver noget at hvile mod.

## Iriserende CSS med farveskift ved hover

På nettet kan du få glansen til at bevæge sig, når nogen peger på den, og det er det ene, en trykt perle kan, som et fladt billede ikke kan. Når du registrerer vinklen med `@property`, kan browseren animere den jævnt; browsere uden understøttelse viser blot hviletilstanden. [MDN-siden om @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) har detaljerne.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}
```

Et perlekort, hvis glans drejer ved hover. Det hvide radiale lag er højlyset; det lineære lag bærer nuancerne.

At rotere vinklen er blidere end at skubbe baggrundspositionen, fordi nuancerne bliver, hvor de er, og kun deres retning ændres, hvilket ligner mere, hvordan en ægte overflade fanger lyset. Til blandinger, der blander jævnere, hjælper det at definere stop i OKLCH; se [OKLCH-gradienter i CSS](https://gradiently.design/da/guide/css-gradient-oklch).

## Tekst på en iriserende baggrund

Lys iridescens er en svær overflade for skrift. Hvid tekst forsvinder på den, og mørk tekst virker kun, hvis området bag den er jævnt. Brug et mørkt blæk fra paletten frem for ren sort, hold ordene over den roligste del af blandingen, og lad det mest urolige skift ligge i et hjørne. De generelle regler står i [tekst på en gradientbaggrund](https://gradiently.design/da/guide/text-on-gradient).

Et lyst perlemorsagtigt opslag om en produktlancering, hvor overskriften løber hen over glansens lyseste del og er svag

Ord lagt direkte over de skiftende nuancer mister deres kanter, hvor glansen er lysest.

Det samme perlemorsagtige opslag om en produktlancering med et jævnt område bag overskriften og farveskiftet flyttet til et hjørne

Med det roligste område bag overskriften og farveskiftet skubbet til side læses det samme opslag med et blik.

Her tjener en Gradiently Mark sine penge. En Mark ved, hvor ordene står: den flytter sit roligste område bag dem, og Auto-blæk vælger lys eller mørk skrift linje for linje ud fra Markens egen palet, så en blød perlemorsoverflade forbliver læselig i enhver størrelse uden bokse eller skygger.

## Hvor iridescens virker bedst

- **Hudpleje og skønhed**: lanceringsopslag, nuancekort og klistermærker på emballage. Den antyder dug og lys på huden; se [design til hudplejebrands](https://gradiently.design/da/guide/skincare-brand-design).
- **Brude og bryllup**: invitationer og save the date på perle, med grafitblæk og rummelige margener.
- **Smykker**: en perle- eller opalbund bag produktfotos fremhæver stenene uden at konkurrere med dem.
- **Musik og natteliv**: den mørke oliefilmblanding på en story på 1080×1920 med én linje hvid skrift over det mørkeste område.
- **Produktsider for teknologi**: et perlehelt med hover-glansen ovenfor, holdt bag en kort overskrift.

Iridescens klæder rene serifskrifter eller lette sans serif-skrifter med god afstand. Den støder mod kraftige skygger, tykke konturer og mættede accenter. Vil du have metal i stedet for perle, er [kromeffekten](https://gradiently.design/da/guide/chrome-effect) den hårdere, koldere søskende.

## FAQ

### Hvilke farver udgør en iriserende gradient?

Lys lilla, mint, himmelblå, lyserød og creme over en hvid bund, plus et blødt hvidt højlys. Til en mørk version bruger du dyb turkis, violet og bronze på en blåsort.

### Hvad er forskellen på iriserende og holografisk?

Iriserende er blød og lys, som en perle eller en sæbeboble. Holografisk kører hele regnbuen ved høj mætning, som folieklistermærker.

### Hvordan laver jeg en iriserende effekt i CSS?

Læg et hvidt radialt højlys over en lineær gradient af lyse nabonuancer. For at få den til at skifte registrerer du en vinkel med `@property` og ændrer den ved hover.

### Er perlemors- og iriserende det samme?

Perlemorsagtig er en slags iridescens: for det meste hvid med et svagt farveskift. Iriserende dækker også mørkere skift som olie på vand eller et billeskjold.

### Hvilken skriftfarve virker på en iriserende baggrund?

Et mørkt blæk fra paletten, for eksempel en grafit med et strejf af violet, placeret over det roligste område. Hvid skrift kan sjældent læses på lys iridescens.