Glødeeffekt i design: mykt lys uten glorie rundt teksten

En glødeeffekt er en flekk med lys: en lys fargekjerne som toner sakte ut i mørkere omgivelser, som om en lampe sto rett bak flaten. Brukt riktig gir den dybde til et flatt design og trekker blikket mot et produkt, en knapp eller en form. Brukt feil blir den en uklar ring rundt overskriften. Regelen hele denne siden følger, er enkel: legg gløden på former og bakgrunner, og hold ordene skarpe.

Hvor en glød hører hjemme, og hvor den ikke gjør det

Lys rundt et objekt sier at objektet er viktig. Lys rundt bokstaver gjør noe annet: det myker opp kantene, senker kontrasten mellom strek og bakgrunn og får linjen til å se ute av fokus på små skjermer. Derfor bør gløden ligge nær ordene, aldri pakket rundt dem. Trenger teksten hjelp for å kunne leses, fikser du heller området bak den; alternativer til tekstskygge viser de renere løsningene.

Glødende bakgrunner med koder

Den enkleste glødende bakgrunnen er en radiell gradient som starter lyst, faller raskt gjennom en rikere mellomtone og toner ut i en nesten svart bunn. Flytter du sentrum bort fra midten, føles den som en lyskilde og ikke som en blink.

Hver av disse har tre deler: en kjerne som er nær hvit eller svært blek, et mettet midtstopp og en dyp bunn i samme fargefamilie. Dropper du midtstoppet, ser gløden grå ut der den møter det mørke, problemet som er beskrevet i grumsete gradienter. Mer om selve formen finner du i radielle gradienter.

Slik lager du en glød som ser ut som ekte lys

1. 1

   Start med en mørk eller dempet bunn

   Lys trenger mørke for å synes. En blåsvart, en dyp grønn eller en støvete papirtone fungerer alle; en skarp hvit bunn gir gløden ingen steder å gå.

2. 2

   Gi kjernen en lysere, varmere tone

   Ekte lys er lysest og minst mettet i midten. Gjør kjernen til en blek versjon av glødfargen, for eksempel #fde68a for en oransje glød.

3. 3

   La den tone sakte ut

   Uttoningen bør gå over et stort område, ofte halve bildet. En kort uttoning ser ut som en spotlight klippet ut med saks.

4. 4

   Bestem hvor lyset kommer fra

   Plasser kjernen nær en kant eller et hjørne, eller bak objektet den lyser opp. Hold så resten av designet i tråd med den retningen.

5. 5

   Legg til fint korn

   Lange mørke uttoninger er der striper synes mest. Et lett støylag skjuler trinnene; kornete gradienter viser metoden.

En test til: slå av gløden og se igjen. Fungerer designet fortsatt, gir gløden atmosfære. Faller det fra hverandre, gjør gløden en jobb som oppsett eller kontrast burde gjort.

Glødeeffekt i CSS

Det finnes tre pålitelige måter å lage glød på nettet. En box-shadow uten forskyvning og med stor uskarphet lyser opp kantene på et kort eller en knapp. En radiell gradient på et pseudoelement legger en myk lyspøl bak et objekt. Og filter: blur() på en farget form gir det mykeste resultatet, men koster mer å tegne. MDN-referansen for box-shadow lister alle verdiene.

/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

På knapper holder du gløden diskret og etiketten skarp: lyset tilhører formen på knappen, ikke ordene. Hele skyggesyntaksen finner du i CSS box-shadow.

Glød i innlegg, plakater og storyer

I et stillestående design gjør gløden best jobb bak motivet eller i den tomme halvdelen av bildet. Legg lyset der blikket skal lande først, og sett så overskriften over den mørkere, roligere delen av bunnen. Lyset leder leseren til ordene uten å røre dem.

Dette er nøyaktig det en Mark i Gradiently gjør av seg selv. Det roligste området legger seg bak ordene, farger nær bokstavene blir dypere eller lysere, og Auto blekk velger lys eller mørk tekst linje for linje fra Markens palett, så du trenger ingen bokser, skygger eller glorier. Du kan se ideen i Auto blekk.

Glød, neon og lyslekkasjer sammenlignet

Disse tre blandes ofte sammen. En glød er mykt, bredt lys fra én kilde. Neongradienter er mettet, elektrisk farge med en tynn, lys strek i midten, nærmere skilting. Lyslekkasjer er varme striper som etterligner film og som regel kommer inn fra en kant. Alle tre trenger en mørk bunn, og alle tre holder seg unna teksten. Vil du at lyset skal drive og skifte, er nordlysgradienter en slektning i bevegelse.