# Holografiska gradienter och iriserande färg, förklarat

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

Holografisk folie, såpbubblor och pärlemor byter färg när du rör dig. En platt skärm kan inte det, men en väl byggd gradient kan övertyga ögat om att den gör det.

## The short version

- En holografisk gradient imiterar material som byter färg med betraktningsvinkeln, som holografisk folie, såpbubblor och pärlemor.
- Verklig iridescens kommer av ljus som interfererar i tunna skikt eller sprids mot fina ränder, vilket är varför färgerna skiftar i regnbågsordning när du rör dig.
- På skärm är en konisk gradient av bleka regnbågsnyanser plus en rörlig vit glans det mest övertygande sättet att fejka det.
- Holografiska gradienter ser bäst ut i bleka, pärlskimrande toner med en klar highlight, snarare än i fullt mättade regnbågsfärger.
- Holografiska effekter fungerar som accent på ett kort, en dekal eller en produktyta, och tröttar snabbt när de täcker allt.

En **holografisk gradient** är en gradient som imiterar iriserande material, som holografisk folie, såpbubblor, olja på vatten eller pärlemor, vars färg ändras när du rör dem. På skärm betyder det bleka regnbågsnyanser som flyter in i varandra, oftast med en klar vit glans som korsar ytan. De bästa känns som ett material som fångar ljus, de sämsta ser ut som en regnbågsdekal ur ett clipart-bibliotek. Skillnaden är nästan helt återhållsamhet.

## Vad som gör något iriserande

Iridescens är färg som beror på vilken vinkel du tittar från. I en såpbubbla eller en oljefläck reflekteras ljus mot en mycket tunn hinnas ovan- och undersida, och de två reflektionerna interfererar, förstärker vissa färger och släcker andra. I holografisk folie och på baksidan av en cd delar mikroskopiska ränder upp ljuset i dess färger, som ett prisma. Hur som helst är resultatet detsamma för ögat: färger i regnbågsordning som glider över ytan när den lutas.

| Utseende | Vad du ser | Så fejkar du det |
| --- | --- | --- |
| Holografisk folie | Skarpa band av regnbågsfärg som hoppar med vinkeln | Koniska eller randiga gradienter med skarpa highlights |
| Iriserande | Mjuka regnbågsskiftningar över en slät yta | Bleka koniska eller mesh-gradienter, långsam glans |
| Pärlemorskimrande | Mestadels vitt med svaga antydningar av rosa, blått och grönt | Nästan vit radiell gradient med färgade kanter |
| Oljefläck | Regnbågsfärger som virvlar på en mörk yta | Mörk grund med dämpade regnbågsband |
| Krom | Grå spegelband, ingen regnbåge | Hårda ljusa och mörka band i grått |

Fem besläktade ytor. Holografisk och iriserande är regnbågsvarianterna, pärlemor och krom är deras stillsammare kusiner.

## Exempel på holografiska gradienter

- Konisk folie: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Linjär iridescens: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Pärla: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Oljefläck: `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%)`
- Folieränder: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Sex ytor som enskilda CSS-värden. Lägg märke till hur bleka regnbågsfärgerna är: det är det som får dem att läsas som folie i stället för en flagga.

## Varför koniska gradienter fungerar så bra

En konisk gradient byter färg när du rör dig runt en punkt, så dess nyanser solfjädrar ut från ett centrum, som ljus som sprids mot en böjd folie. Sätt centrum utanför formens kant så blir solfjädern milda diagonala band. Ändra vinkeln i `from` och varje färg glider, vilket är precis vad iridescens gör när du lutar den. Detaljerna om syntaxen finns i [koniska gradienter](https://gradiently.design/sv/guide/conic-gradient).

- Rosa blixt: #ffd6f5
- Lila: #d9c8ff
- Isblå: #bfe9ff
- Mint: #c9ffe6
- Smörgul: #fff4c2
- Glans: #ffffff

En holografisk palett är en blek regnbåge i ordning, plus vitt. Att hoppa över steg eller blanda ordningen bryter illusionen.

Håll varje nyans på en likartad, hög ljushet. Riktig folie reflekterar mycket ljus, så dess färger är klara och lite vittvättade. Om en färg är mycket mörkare eller mer mättad än de andra läses den som en strimma färg i stället för en reflektion. Bleka färger är också förlåtande: de blir inte grå där de möts, eftersom de alla ligger så nära vitt.

> **Var ljuset är** Bestäm var ljuset kommer ifrån och lägg den starkaste glansen där. En holografisk yta med highlighten på fel plats ser platt ut, hur bra färgerna än är.

## Så gör du en holografisk effekt i CSS

Två lager gör det mesta av jobbet: en blek konisk regnbåge under, och ett smalt band av vitt ovanpå som rör sig över när elementet hovras, som ljus som glider över folie. Håll rörelsen långsam och stäng av den för dem som föredrar reducerad rörelse.

```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 en vit glans som sveper över vid hovring. Glanslagret är 250 % brett så att det kan röra sig.

För mer realism, lägg ett mycket fint korn över hela ytan och låt en andra, svagare glans gå i en annan vinkel. Om du vill att hela fältet ska driva av sig självt visar [animerade gradientbakgrunder](https://gradiently.design/sv/guide/animated-gradient-background) hur du animerar gradienter effektivt.

## Så håller du holografiska gradienter smakfulla

### Clipart

- Fullt mättade regnbågsfärger
- Holografisk effekt på varje yta
- Stökig folie bakom brödtext
- Snabb, konstant skimmer

### Material

- Bleka, pärlskimrande nyanser i regnbågsordning
- Ett holografiskt föremål: ett kort, ett märke, en produkt
- Enfärgad eller lugn grund bakom orden
- En långsam glans som rör sig när något händer

Holografiska ytor hör hemma i [Y2K-estetiken](https://gradiently.design/sv/guide/y2k-aesthetic), skönhetsförpackningar, samlarkort, festivalkläder och teknikaccessoarer. På ett varumärke bör du behandla effekten som folie på en tryckt ask: används den på ett ställe signalerar den något speciellt. Para den med gott om vitt eller en lugn [pastellgrund](https://gradiently.design/sv/guide/pastel-gradients) och mörk text.

Ett produktdroppsinlägg som meddelar en limiterad folieupplaga på en mjuk, blek gradient

Ett dropp-meddelande är ett naturligt hem för en blek, skiftande yta: själva ytan säger limiterat.

## Holografiskt i tryck och förpackningar

Ingen kombination av vanliga färger kan återskapa verklig iridescens, eftersom tryckt färg inte ändras med vinkeln. En tryckt holografisk gradient ser ut som en blek regnbåge, vilket kan bli vackert, men för det äkta behöver du holografisk folie eller iriserande film från ditt tryckeri. Om du designar för båda, håll skärmversionen blek och enkel så att den tryckta inte gör dig besviken, se [gradienter i tryck](https://gradiently.design/sv/guide/print-gradients).

Du hittar bleka, pärlskimrande Marks på Marknaden genom att söka på färgord som ”pärla” eller ”iriserande lila”, och kan designa med dem i vilken storlek som helst.

## FAQ

### Vad är en holografisk gradient?

En holografisk gradient imiterar iriserande material som folie, såpbubblor och pärlemor, med bleka regnbågsnyanser i ordning och en klar glans.

### Vad är skillnaden mellan holografisk och iriserande?

Holografisk folie visar skarpare, hoppande regnbågsband, medan iriserande ytor visar mjukare, jämnare färgskiftningar. Båda ändras med betraktningsvinkeln.

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

Använd en blek `conic-gradient` av regnbågsnyanser och lägg en rörlig vit `linear-gradient`-glans över den, animerad vid hovring eller scroll.

### Vilka färger bygger en holografisk gradient?

Blekrosa, lila, isblå, mint och smörgult, i regnbågsordning, plus vitt för glansen.

### Går det att trycka en holografisk gradient?

Färg ensam kan bara trycka en blek regnbåge. För en äkta holografisk yta, fråga ditt tryckeri om holografisk folie eller iriserande film.