Radiale gradienter: rampelyset som leder blikket

En radial gradient er en overgang som sprer seg utover fra ett enkelt punkt, i ringer, i stedet for å gå i én retning. Midten har én farge, og hver ring beveger seg mot den neste. Fordi øynene våre først går til det lyseste og mest mettede området i et bilde, fungerer en radial gradient som et rampelys: du bestemmer hvor oppmerksomheten lander, og plasserer så overskriften, produktet eller ansiktet der.

Denne guiden handler om å bruke radiale gradienter i design. For hele syntaksen, se CSS radial-gradient(), og for hvordan den står seg mot lineær, konisk og mesh, se typer gradienter.

Hva en radial gradient gjør med et oppsett

En lineær gradient antyder retning: lys ovenfra, en horisont, et sveip. En radial gradient antyder en kilde. Den kilden blir det naturlige blikkfanget, så alt som plasseres på den, føles tilsiktet, og alt som plasseres i kantene, føles sekundært. Det er en av de enkleste måtene å bygge visuelt hierarki på uten å legge til en eneste form.

Sirkel eller ellipse

I CSS er en radial gradient en ellipse som standard, strukket til proporsjonene i boksen sin. På et bredt banner betyr det en flat, bred glød, og på en høy story blir den en høy oval. En sirkel beholder samme form i alle størrelser, noe som leses mer som en ekte lyskilde.

Bruk en ellipse når du vil at gløden skal fylle formatet jevnt, som med en vignett. Bruk en sirkel når gradienten skal se ut som én lampe, en sol eller en glorie bak en enkelt gjenstand.

Hvor du plasserer midtpunktet

En glød midt i et kvadrat er den vanligste radiale gradienten og den minst interessante. Den ser ut som en blink. Når du flytter midtpunktet, endres hele stemningen i arbeidet.

• Bak motivet. Legg gløden rett bak et produkt eller et portrett, så det skiller seg fra bakgrunnen.
• På en tredjedel. Å plassere kilden nær en tredjedel av bredden eller høyden føles balansert uten å være statisk.
• Utenfor rammen. Et midtpunkt under eller ved siden av lerretet gir en myk kant av lys, som en soloppgang eller en lampe like utenfor bildet.
• Bort fra teksten. Hvis det lyseste punktet ligger under hvit skrift, faller kontrasten akkurat der du trenger den mest.

Fire jobber radiale gradienter gjør godt

Rampelys og fokus

En lys midte på en mørk grunn peker på det som står på den. Det passer til produktbilder, arrangementsplakater og kunngjøringsinnlegg der én ting betyr noe.

Vignett

Det motsatte: en lysere midte som toner ut mot mørkere kanter. En svak vignett trekker øyet innover og får en flat bakgrunn til å føles fotografert. Hold endringen liten, ellers ser det ut som et gammelt kamerafilter.

Glød og glorie

En liten, mettet sirkel som toner ut til gjennomsiktig, leses som lys som kommer fra noe: et neonskilt, en skjerm, et ikon. Legg to eller tre slike lagvis på ulike steder, og du er halvveis til en auroragradient.

Fargefelt

Stable flere radiale gradienter med gjennomsiktige kanter, og de blander seg til et mykt, organisk felt. Det er slik de fleste mesh-gradienter i CSS blir etterlignet.

.poster {
  background:
    radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%),
    radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%),
    #0f0a1f;
}

Radiale gradienter med tekst

Bestem hvilken av to jobber gløden har. Enten rammer den inn ordene, med mørk skrift på den lyse midten, eller så rammer den inn rommet ved siden av ordene, med lys skrift på det mørke rundt. Problemene starter når kanten av gløden skjærer gjennom en tekstlinje, fordi kontrasten endrer seg halvveis. Tekst på en gradient har mer om å finne den rolige sonen.

Vanlige problemer med radiale gradienter

Striper er det du må passe på. En glød fra dyp marine til svart dekker svært få fargenivåer over et stort område, så den går i trinn. La uttoningen gå lenger og legg til korn, slik det beskrives i striper i gradienter.