# Iriserande gradienter: pärlskimrande färgskiften med koder

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

Iriserande är den lugna kusinen till holografiskt: en pärla, en såpbubbla, insidan av ett snäckskal. Här är färgerna, koderna och reglerna som får det att se ut som en yta och inte som en regnbåge.

## The short version

- En iriserande gradient blandar flera bleka, närbesläktade nyanser, oftast lila, mint, rosa, himmelsblått och kräm, så att ytan verkar byta färg när blicken rör sig över den.
- Iriserande skiljer sig från holografisk design i styrka: holografiskt går genom hela regnbågen med hög mättnad, medan iriserande förblir mjukt, blekt och mestadels neutralt.
- Pärlemoreffekten kommer av en ljus botten, låg mättnad, ett vitt högdagerljus och nyanser som ligger nära varandra på färghjulet.
- Mörkt iriserande, som en oljehinna eller ett skalbaggsskal, använder samma idé på nästan svart botten med djup turkos, violett och brons.
- Text på en iriserande bakgrund behöver en lugn, jämn yta bakom sig, eftersom bleka skiftande nyanser ger svag kontrast mot ljus text och rörig kontrast mot mörk text.

En **iriserande gradient** är en blandning av bleka nyanser som ligger tätt ihop, typiskt lila, mint, rosa, himmelsblått och en varm kräm, lagda över en ljus botten med ett mjukt vitt högdagerljus. Effekten härmar verkliga iriserande ting: pärlor, såpbubblor, insidan av ett havsöronskal. Färgerna är milda och ändras gradvis över ytan, så det läses som en glans snarare än en färgrand. Koderna nedan går att klistra in direkt i CSS eller i valfritt designverktyg som tar hex.

## Koder för iriserande gradienter

Var och en av dessa utgår från nästan vitt eller nästan svart och lägger till nyanser som gränsar till varandra. Kopiera en som den är, eller byt ut en enda färgpunkt så blir den din.

- Pärla: `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åpbubbla: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Havsöra: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Oljehinna: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Skalbaggsskal: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Fyra ljusa iriserande blandningar och två mörka. Alla sex håller nyanserna nära varandra i styrka, och det är det som hindrar dem från att läsas som en regnbåge.

Lägg märke till vad de ljusa har gemensamt: ingen färgpunkt är fullt mättad, och den ljusaste punkten är rent eller nästan rent vit. Skruva upp en punkt till en stark färg och pärlan blir en [pastellgradient](https://gradiently.design/sv/guide/pastel-gradients) eller, längre än så, en regnbåge.

## Iriserande eller holografiskt

Folk använder ofta de två orden om samma sak, men i design beskriver de olika uttryck. Holografiskt härmar folieklistermärken och hologram på kreditkort: alla nyanser, hög mättnad, hårda band. Iriserande härmar naturliga ytor som byter färg stilla. Vill du ha den högljudda versionen går [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients) igenom den i detalj.

| Egenskap | Iriserande | Holografiskt |
| --- | --- | --- |
| Mättnad | Låg, bleka nyanser | Hög, hela regnbågen |
| Botten | Nästan vit eller nästan svart | Ofta silver eller själva färgerna |
| Övergångar | Långa och mjuka | Korta, ofta med band |
| Förebild i verkligheten | Pärla, skal, såpbubbla, olja på vatten | Folie, klistermärken, säkerhetshologram |
| Stämning | Lugn, förfinad, hudvård, bröllop | Lekfull, högljudd, Y2K, musik |

Det snabbaste testet: kisa. Ser du fortfarande tydliga nyanser är det holografiskt. Ser du en mjuk blek yta med en antydan till färg är det iriserande.

## Så bygger du en iriserande gradient från grunden

1. **Välj botten** Ljust iriserande utgår från vitt eller ett svagt varmt off-white som `#fbf9f6`. Mörkt iriserande utgår från ett blåsvart som `#0d0f1a`. Botten bör täcka en tredjedel av ytan eller mer.
2. **Välj tre till fem närliggande nyanser** Gå runt färghjulet i små steg: lila till himmel till mint till kräm till rosa. Håll dem på liknande ljushet så att ingen hoppar fram.
3. **Sänk mättnaden** Om en nyans ser ut som en färg du kan namnge från andra sidan rummet är den för stark. För ljusa versioner, sikta på nyanser som mest är vita med en strimma av färg.
4. **Lägg till ett högdagerljus** En liten vit radiell fläck, förskjuten mot ett hörn, visar ögat varifrån ljuset kommer. En räcker, två börjar likna en blank knapp.
5. **Avsluta med fint korn** Bleka blandningar får lätt band på skärmar. Lite brus bryter upp stegen, vilket [banding i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar tillsammans med lösningen.

Steget som betyder mest är det tredje. De flesta iriserande designer som misslyckas är helt enkelt för färgstarka. Äkta pärlemor är övervägande vit, och färgen är något du ser i andra hand.

- Skalvit: #fbf9f6
- Lila skimmer: #ece6f6
- Mintskimmer: #dff3f4
- Himmelsskimmer: #e4ecf7
- Rosaskimmer: #fbe7f0
- Krämskimmer: #fff6e0
- Grafitbläck: #3d3a4a

En fungerande iriserande färgpalett: en botten, fem skimmer och ett mörkt bläck för text. Bläcket ger de bleka färgerna något att vila mot.

## Iriserande CSS med färgskifte vid hover

På webben kan du låta glansen röra sig när någon pekar på den, vilket är det enda en tryckt pärla gör som en platt bild inte kan. Genom att registrera vinkeln med `@property` kan webbläsaren animera den mjukt, och webbläsare utan stöd visar bara viloläget. [MDN-sidan om @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) har detaljerna.

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

Ett pärlkort vars glans vrids vid hover. Det vita radiella lagret är högdagerljuset, det linjära lagret bär nyanserna.

Att rotera vinkeln är mildare än att glida bakgrundspositionen, eftersom nyanserna ligger kvar och bara deras riktning ändras, vilket ligger närmare hur en verklig yta fångar ljus. För blandningar som tonar jämnare hjälper det att definiera färgpunkter i OKLCH, se [OKLCH-gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-oklch).

## Text på en iriserande bakgrund

Blekt iriserande är en svår yta för text. Vit text försvinner på den, och mörk text fungerar bara om ytan bakom är jämn. Använd ett mörkt bläck ur paletten i stället för rent svart, håll orden över den lugnaste delen av blandningen och låt det mest livliga skiftet ligga i ett hörn. De allmänna reglerna finns i [text på gradientbakgrund](https://gradiently.design/sv/guide/text-on-gradient).

Ett blekt pärlskimrande inlägg om en produktlansering där rubriken löper över glansens ljusaste del och är svag

Ord lagda rakt över de skiftande nyanserna tappar sina kanter där glansen är som ljusast.

Samma pärlskimrande inlägg om en produktlansering med en jämn yta bakom rubriken och färgskiftet flyttat till ett hörn

Med den lugnaste ytan bakom rubriken och färgskiftet förskjutet åt sidan läses samma inlägg med en blick.

Här gör en Gradiently Mark skäl för sig. En Mark vet var orden står: den flyttar sin lugnaste del bakom dem, och Auto-bläck väljer ljus eller mörk text rad för rad ur Markens egen palett, så en mjuk pärlskimrande yta förblir läsbar i varje storlek utan rutor eller skuggor.

## Där iriserande fungerar bäst

- **Hudvård och skönhet**: lanseringsinlägg, nyanskort och förpackningsetiketter. Det antyder dagg och ljus på hud, se [design för hudvårdsvarumärke](https://gradiently.design/sv/guide/skincare-brand-design).
- **Brud och bröllop**: inbjudningar och save the date på pärlemor, med grafitbläck och generösa marginaler.
- **Smycken**: en pärl- eller opalbotten bakom produktfoton lyfter fram stenarna utan att konkurrera med dem.
- **Musik och nattliv**: den mörka oljehinneblandningen i en story på 1080×1920, med en rad vit text över det mörkaste området.
- **Produktsidor för teknik**: en pärlhero med hoverglansen ovan, hållen bakom en kort rubrik.

Iriserande passar bra ihop med ren serif eller lätt sans serif och generöst teckenavstånd. Det krockar med kraftiga skuggor, tjocka konturer och mättade accenter. Vill du ha metall i stället för pärla är [kromeffekten](https://gradiently.design/sv/guide/chrome-effect) den hårdare, kallare syskonet.

## FAQ

### Vilka färger ger en iriserande gradient?

Blekt lila, mint, himmelsblått, rosa och kräm över en vit botten, plus ett mjukt vitt högdagerljus. För en mörk version, använd djup turkos, violett och brons på blåsvart.

### Vad skiljer iriserande från holografiskt?

Iriserande är mjukt och blekt, som en pärla eller såpbubbla. Holografiskt går genom hela regnbågen med hög mättnad, som folieklistermärken.

### Hur gör jag en iriserande effekt i CSS?

Lägg ett vitt radiellt högdagerljus över en linjär gradient av bleka närliggande nyanser. För att få den att skifta registrerar du en vinkel med `@property` och ändrar den vid hover.

### Är pärlemor samma sak som iriserande?

Pärlemor är en sorts iriserande: mestadels vitt med ett svagt färgskifte. Iriserande omfattar också mörkare skiften som olja på vatten eller ett skalbaggsskal.

### Vilken textfärg fungerar på en iriserande bakgrund?

Ett mörkt bläck ur paletten, till exempel en grafit med en antydan av violett, placerat över den lugnaste ytan. Vit text syns sällan på blekt iriserande.