Holografiske gradienter og iriserende farger forklart

En holografisk gradient er en gradient som etterligner iriserende materialer, som holografisk folie, såpebobler, olje på vann eller perlemor, der fargen endres når du beveger dem. På skjerm betyr det bleke regnbuetoner som flyter over i hverandre, som regel med et lyst, hvitt skinn som krysser flaten. De beste føles som et materiale som fanger lys; de verste ser ut som et regnbueklistremerke fra et utklippsarkiv. Forskjellen er nesten utelukkende tilbakeholdenhet.

Hva som gjør noe iriserende

Irisering er farge som avhenger av vinkelen du ser fra. I en såpeboble eller en oljeflekk reflekteres lys fra toppen og bunnen av en svært tynn film, og de to refleksjonene interfererer, forsterker noen farger og opphever andre. I holografisk folie og på baksiden av en CD deler mikroskopiske riller lyset i fargene sine, som et prisme. Uansett er resultatet det samme for øyet: farger i regnbuens rekkefølge som glir over flaten når den vippes.

Eksempler på holografiske gradienter

Hvorfor koniske gradienter fungerer så godt

En konisk gradient skifter farge når du beveger deg rundt et punkt, så fargetonene vifter ut fra et sentrum, som lys som spres fra en buet folie. Sett sentrum utenfor kanten av formen, og viften blir til milde diagonale bånd. Endre vinkelen i from, og hver farge glir, og det er nøyaktig det irisering gjør når du vipper den. Detaljene i syntaksen står i koniske gradienter.

Hold hver fargetone på en lignende, høy lyshet. Ekte folie reflekterer mye lys, så fargene er lyse og litt vasket med hvitt. Er én farge mye mørkere eller mer mettet enn resten, leses den som en stripe maling og ikke som en refleks. Bleke farger tilgir også: de blir ikke grå der de møtes, fordi alle ligger så nær hvitt.

Slik lager du en holografisk effekt i CSS

To lag gjør det meste av jobben: en blek konisk regnbue underst, og et smalt bånd av hvitt øverst som beveger seg over når pekeren holdes over elementet, som lys som glir over folie. Hold bevegelsen langsom, og slå den av for dem som foretrekker redusert bevegelse.

.holo {
  background-image:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: background-position 0.9s ease;
  border-radius: 20px;
}

.holo:hover {
  background-position: 0% 0, 0 0;
}

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

For mer realisme legger du et svært fint korn over hele flaten og lar et andre, svakere skinn gå i en annen vinkel. Vil du at hele feltet skal drive av seg selv, viser animerte gradientbakgrunner hvordan du animerer gradienter effektivt.

Hold holografiske gradienter smakfulle

Holografiske finisher hører hjemme i Y2K-estetikken, skjønnhetsemballasje, samlekort, festivalklær og teknologitilbehør. I en merkevare behandler du effekten som folie på en trykt eske: brukt på ett sted signaliserer den noe spesielt. Kombiner den med mye hvitt eller en rolig pastellbunn og mørk skrift.

Holografisk på trykk og emballasje

Ingen kombinasjon av vanlige trykkfarger kan gjengi ekte irisering, fordi trykkfarge ikke endrer seg med vinkelen. En trykt holografisk gradient ser ut som en blek regnbue, og det kan være vakkert, men for den ekte varen trenger du holografisk folie eller iriserende film fra trykkeriet. Designer du for begge deler, holder du skjermversjonen blek og enkel, så den trykte ikke skuffer; se gradienter på trykk.

Du finner bleke, perleaktige Marks på Markedet ved å søke på fargeord som «perle» eller «iriserende lilla», og du kan designe med dem i enhver størrelse.