# Iriserende gradienter: perlemorskimrende fargespill med koder

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

Iriserende er holografiskens stille fetter: en perle, en såpeboble, innsiden av et skjell. Her er fargene, kodene og reglene som får det til å se ut som en overflate og ikke en regnbue.

## The short version

- En iriserende gradient blander flere lyse, nært beslektede toner, gjerne syrin, mint, rosa, himmelblå og krem, så overflaten ser ut til å skifte farge når blikket glir over den.
- Iriserende design skiller seg fra holografisk i styrke: holografisk bruker hele regnbuen med høy metning, mens iriserende holder seg mykt, lyst og stort sett nøytralt.
- Perlemorseffekten kommer av en lys bunn, lav metning, ett hvitt høylys og toner som ligger ved siden av hverandre på fargesirkelen.
- Mørk iriserende, som et oljeflak eller et billeskall, bruker den samme ideen på en nesten svart bunn med dyp blågrønn, fiolett og bronse.
- Tekst på en iriserende bakgrunn trenger et rolig, jevnt område bak seg, fordi lyse, skiftende toner gir svak kontrast til lys tekst og urolig kontrast til mørk tekst.

En **iriserende gradient** er en blanding av lyse toner som ligger tett, typisk syrin, mint, rosa, himmelblå og en varm krem, lagt over en lys bunn med et mykt hvitt høylys. Effekten etterligner ting som virkelig irisierer: perler, såpebobler, innsiden av et abaloneskjell. Fargene er milde og skifter gradvis over flaten, så det leses som et skimmer og ikke som en fargestripe. Kodene under er klare til å limes inn i CSS eller et hvilket som helst designverktøy som godtar hex.

## Koder for iriserende gradienter

Hver av disse starter fra nesten hvit eller nesten svart og legger til toner som er naboer. Kopier en som den er, eller bytt ut ett enkelt punkt for å gjø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åpeboble: `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)`
- Oljeflak: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Billeskall: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Fire lyse iriserende blandinger og to mørke. Alle seks holder tonene jevnsterke, og det er det som hindrer dem i å se ut som en regnbue.

Legg merke til hva de lyse har til felles: ingen punkter er fullt mettet, og det lyseste punktet er rent eller nesten rent hvitt. Skyv et punkt mot en sterk farge, så blir perlen til en [pastellgradient](https://gradiently.design/nb/guide/pastel-gradients), eller enda lenger, til en regnbue.

## Iriserende eller holografisk

Mange bruker de to ordene om det samme, men i design beskriver de ulike uttrykk. Holografisk etterligner folieklistremerker og hologrammer på bankkort: alle fargetoner, høy metning, harde bånd. Iriserende etterligner naturlige overflater som skifter farge stille. Vil du ha den høylytte versjonen, dekker [holografiske gradienter](https://gradiently.design/nb/guide/holographic-gradients) den fullt ut.

| Egenskap | Iriserende | Holografisk |
| --- | --- | --- |
| Metning | Lav, lyse toner | Høy, hele regnbuen |
| Bunn | Nesten hvit eller nesten svart | Ofte sølv eller fargene selv |
| Overganger | Lange og myke | Korte, ofte i bånd |
| Forbilde fra virkeligheten | Perle, skjell, såpeboble, olje på vann | Folie, klistremerker, sikkerhetshologrammer |
| Stemning | Rolig, raffinert, hudpleie, bryllup | Leken, høylytt, Y2K, musikk |

Den raskeste testen: myse. Ser du fortsatt tydelige fargetoner, er det holografisk. Ser du en myk, lys overflate med et snev av farge, er det iriserende.

## Slik bygger du en iriserende gradient fra bunnen

1. **Velg bunnen** Lys iriserende starter fra hvitt eller en svakt varm offwhite som `#fbf9f6`. Mørk iriserende starter fra en blåsvart som `#0d0f1a`. Bunnen bør dekke en tredjedel av flaten eller mer.
2. **Velg tre til fem nabotoner** Gå rundt fargesirkelen i små steg: syrin til himmelblå til mint til krem til rosa. Hold dem på omtrent samme lyshet, så ingen hopper fram.
3. **Senk metningen** Ser en tone ut som en farge du kunne navngitt fra andre siden av rommet, er den for sterk. For lyse versjoner sikter du på toner som er mest hvite med et spor av farge.
4. **Legg til ett høylys** En liten hvit radial flekk, forskjøvet mot et hjørne, forteller øyet hvor lyset kommer fra. Én er nok; to begynner å ligne en blank knapp.
5. **Avslutt med fint korn** Lyse blandinger får lett striper på skjerm. Litt støy bryter opp trinnene, og [striper i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer det sammen med løsningen.

Det viktigste steget er det tredje. De fleste iriserende design som mislykkes, er rett og slett for fargerike. Ekte perlemor er overveiende hvitt; fargen er noe du legger merke til etterpå.

- Skjellhvit: #fbf9f6
- Syrinskimmer: #ece6f6
- Mintskimmer: #dff3f4
- Himmelskimmer: #e4ecf7
- Rosaskimmer: #fbe7f0
- Kremskimmer: #fff6e0
- Grafittblekk: #3d3a4a

En brukbar iriserende fargepalett: en bunn, fem skimmertoner og ett mørkt blekk til tekst. Blekket er det som gir de lyse fargene noe å hvile mot.

## Iriserende CSS med fargeskifte ved hover

På nettet kan du få skimmeret til å bevege seg når noen peker på det, og det er det ene en trykt perle gjør som et flatt bilde ikke kan. Registrerer du vinkelen med `@property`, kan nettleseren animere den jevnt; nettlesere uten støtte viser bare hviletilstanden. [MDN-siden om @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) har detaljene.

```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 der skimmeret snur seg ved hover. Det hvite radiale laget er høylyset; det lineære laget bærer tonene.

Å rotere vinkelen er mildere enn å skyve bakgrunnsposisjonen, fordi tonene blir liggende og bare retningen endres, noe som ligner mer på hvordan en ekte overflate fanger lys. For blandinger som går jevnere i hverandre, hjelper det å definere punktene i OKLCH; se [OKLCH-gradienter i CSS](https://gradiently.design/nb/guide/css-gradient-oklch).

## Tekst på en iriserende bakgrunn

Lys iriserende er en vanskelig flate for tekst. Hvit tekst forsvinner, og mørk tekst fungerer bare hvis området bak er jevnt. Bruk et mørkt blekk hentet fra paletten i stedet for rent svart, legg ordene over den roligste delen av blandingen, og la det travleste fargeskiftet ligge i et hjørne. De generelle reglene står i [tekst på gradientbakgrunn](https://gradiently.design/nb/guide/text-on-gradient).

Et lyst, perleaktig lanseringsinnlegg der overskriften går over den lyseste delen av skimmeret og blir svak

Tekst lagt rett over de skiftende tonene mister kantene der skimmeret er lysest.

Det samme perleaktige lanseringsinnlegget med et jevnt område bak overskriften og fargeskiftet flyttet til et hjørne

Med det roligste området bak overskriften og fargeskiftet skjøvet til side, leses det samme innlegget med ett blikk.

Det er her en Mark fra Gradiently gjør nytte for seg. En Mark vet hvor ordene står: den flytter det roligste området sitt bak dem, og Automatisk blekk velger lys eller mørk tekst linje for linje fra Markens egen palett, så en myk, perleaktig flate holder seg lesbar i alle størrelser uten bokser eller skygger.

## Der iriserende fungerer best

- **Hudpleie og skjønnhet**: lanseringsinnlegg, nyansekort og emballasjeklistremerker. Det antyder dugg og lys på huden; se [design for hudpleiemerker](https://gradiently.design/nb/guide/skincare-brand-design).
- **Bryllup**: invitasjoner og save the date på perle, med grafittblekk og romslige marger.
- **Smykker**: en perle- eller opalbunn bak produktbilder fanger opp steinene uten å konkurrere med dem.
- **Musikk og uteliv**: den mørke oljeflakblandingen i en story på 1080×1920, med én linje hvit tekst over det mørkeste området.
- **Produktsider for teknologi**: en perlehero med hover-skimmeret over, holdt bak en kort overskrift.

Iriserende passer godt med ren antikva eller lett grotesk og luftig sperring. Det krasjer med tunge skygger, tykke konturer og mettede aksentfarger. Vil du ha metall i stedet for perle, er [kromeffekt](https://gradiently.design/nb/guide/chrome-effect) det hardere, kaldere søskenet.

## FAQ

### Hvilke farger gir en iriserende gradient?

Lys syrin, mint, himmelblå, rosa og krem over en hvit bunn, pluss et mykt hvitt høylys. For en mørk versjon bruker du dyp blågrønn, fiolett og bronse på en blåsvart bunn.

### Hva er forskjellen på iriserende og holografisk?

Iriserende er mykt og lyst, som en perle eller en såpeboble. Holografisk bruker hele regnbuen med høy metning, som folieklistremerker.

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

Legg et hvitt radialt høylys over en lineær gradient av lyse nabotoner. For å få det til å skifte registrerer du en vinkel med `@property` og endrer den ved hover.

### Er perlemor det samme som iriserende?

Perlemor er en type iriserende: mest hvitt med et svakt fargeskifte. Iriserende dekker også mørkere skifter som olje på vann eller et billeskall.

### Hvilken tekstfarge fungerer på en iriserende bakgrunn?

Et mørkt blekk fra paletten, for eksempel en grafitt med et snev av fiolett, plassert over det roligste området. Hvit tekst leses sjelden på lys iriserende.