Iriserande gradienter: pärlskimrande färgskiften med koder

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.

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 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 igenom den i detalj.

Så bygger du en iriserande gradient från grunden

1. 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. 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. 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. 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. 5

   Avsluta med fint korn

   Bleka blandningar får lätt band på skärmar. Lite brus bryter upp stegen, vilket banding i gradienter 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.

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 har detaljerna.

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

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.

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.

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.
• 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 den hårdare, kallare syskonet.