Iriserende gradienter: perlemorskimrende fargespill med koder

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.

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, 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 den fullt ut.

Slik bygger du en iriserende gradient fra bunnen

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

   Avslutt med fint korn

   Lyse blandinger får lett striper på skjerm. Litt støy bryter opp trinnene, og striper i gradienter 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å.

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

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

Å 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.

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.

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.
• 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 det hardere, kaldere søskenet.