Holografiska gradienter och iriserande färg, förklarat

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.

Exempel på holografiska gradienter

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.

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.

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.

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

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 hur du animerar gradienter effektivt.

Så håller du holografiska gradienter smakfulla

Holografiska ytor hör hemma i Y2K-estetiken, 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 och mörk text.

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.

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.