# Holografiske gradienter og iriserende farger forklart

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

Holografisk folie, såpebobler og perlemor skifter alle farge når du beveger deg. En flat skjerm kan ikke det, men en godt bygget gradient kan overbevise øyet om at den gjør det.

## The short version

- En holografisk gradient etterligner materialer som skifter farge med synsvinkelen, som holografisk folie, såpebobler og perlemor.
- Ekte irisering kommer av at lys interfererer i tynne lag eller spres fra fine riller, og derfor skifter fargene i regnbuens rekkefølge når du beveger deg.
- På skjerm er en konisk gradient av bleke regnbuetoner pluss et hvitt skinn i bevegelse den mest overbevisende måten å etterligne det på.
- Holografiske gradienter ser best ut i bleke, perleaktige toner med et lyst høylys, ikke i fullt mettede regnbuefarger.
- Holografiske effekter fungerer som aksent på et kort, et klistremerke eller en produktflate, og blir fort slitsomme når de dekker alt.

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.

| Uttrykk | Hva du ser | Slik etterligner du det |
| --- | --- | --- |
| Holografisk folie | Skarpe bånd av regnbuefarger som hopper med vinkelen | Koniske eller stripete gradienter med skarpe høylys |
| Iriserende | Myke regnbueskift over en glatt flate | Bleke koniske gradienter eller mesh, langsomt skinn |
| Perlemorsaktig | Mest hvitt med svake hint av rosa, blått og grønt | Nesten hvit radial gradient med tonede kanter |
| Oljeflekk | Regnbuefarger som virvler på en mørk flate | Mørk bunn med dempede regnbuebånd |
| Krom | Grå speilbånd, ingen regnbue | Harde lyse og mørke bånd i gråtoner |

Fem beslektede finisher. Holografisk og iriserende er de med regnbue; perlemor og krom er de stillere søskenbarna.

## Eksempler på holografiske gradienter

- Konisk folie: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Lineær irisering: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Perlemor: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Oljeflekk: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Krom: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Foliestriper: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Seks finisher som enkle CSS-verdier. Legg merke til hvor bleke regnbuefargene er: det er det som får dem til å leses som folie og ikke som et flagg.

## 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](https://gradiently.design/nb/guide/conic-gradient).

- Rosa glimt: #ffd6f5
- Lilla: #d9c8ff
- Isblå: #bfe9ff
- Mint: #c9ffe6
- Smør: #fff4c2
- Skinn: #ffffff

En holografisk palett er en blek regnbue i rekkefølge, pluss hvitt. Å hoppe over trinn eller stokke om på rekkefølgen bryter illusjonen.

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.

> **Hvor lyset er** Bestem hvor lyset kommer fra, og legg det lyseste skinnet der. En holografisk flate med høylyset på feil sted ser flat ut, uansett hvor gode fargene er.

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

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

En blek konisk folie med et hvitt skinn som sveiper over ved hover. Skinnlaget er 250 % bredt, så det har plass til å bevege seg.

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](https://gradiently.design/nb/guide/animated-gradient-background) hvordan du animerer gradienter effektivt.

## Hold holografiske gradienter smakfulle

### Utklippsbilde

- Fullt mettede regnbuefarger
- Holografisk effekt på hver flate
- Urolig folie bak brødtekst
- Rask, konstant skimring

### Materiale

- Bleke, perleaktige toner i regnbuens rekkefølge
- Én holografisk gjenstand: et kort, et merke, et produkt
- Ensfarget eller rolig bunn bak ordene
- Et langsomt skinn som beveger seg når noe skjer

Holografiske finisher hører hjemme i [Y2K-estetikken](https://gradiently.design/nb/guide/y2k-aesthetic), 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](https://gradiently.design/nb/guide/pastel-gradients) og mørk skrift.

Et innlegg om et produktslipp som kunngjør en begrenset folieutgave på en myk, blek gradient

En slippkunngjøring er et naturlig hjem for en blek, skiftende flate: finishen sier selv at den er begrenset.

## 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](https://gradiently.design/nb/guide/print-gradients).

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.

## FAQ

### Hva er en holografisk gradient?

En holografisk gradient etterligner iriserende materialer som folie, såpebobler og perlemor, med bleke regnbuetoner i rekkefølge og et lyst skinn.

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

Holografisk folie viser skarpere regnbuebånd som hopper; iriserende flater viser mykere, jevnere fargeskift. Begge endrer seg med synsvinkelen.

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

Bruk en blek `conic-gradient` av regnbuetoner, og legg et hvitt skinn av `linear-gradient` i bevegelse over, animert ved hover eller rulling.

### Hvilke farger gir en holografisk gradient?

Blek rosa, lilla, isblå, mint og smørgul, i regnbuens rekkefølge, pluss hvitt til skinnet.

### Kan man trykke en holografisk gradient?

Trykkfarge alene kan bare trykke en blek regnbue. For en ekte holografisk finish spør du trykkeriet om holografisk folie eller iriserende film.