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

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

En glød skal se ut som lys som faller på en flate: en lys kjerne, en lang uttoning og et mørkt rom rundt. Legg den bak former og inn i bakgrunner, og hold den unna kantene på bokstavene dine.

## The short version

- En glødeeffekt er en lys fargekjerne som gradvis toner ut i mørkere omgivelser, slik at den leses som lys og ikke som maling.
- Glød fungerer best på former, knapper, produktbilder og bakgrunner, der den gir dybde og leder blikket.
- En glorie av glød rundt tekst gjør bokstavkantene uskarpe og teksten vanskeligere å lese, så hold ordene skarpe og legg lyset et annet sted.
- I CSS er en myk glød som regel en radiell gradient som toner ut til gjennomsiktig, eller en box-shadow med stor uskarphet og ingen forskyvning.
- En glød trenger en mørk eller dempet bunn for å synes, og litt korn hindrer at den lange uttoningen får striper.

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](https://gradiently.design/nb/guide/text-shadow-alternatives) viser de renere løsningene.

### Unngå

- En uskarp glorie som klamrer seg til overskriften
- Glød i samme farge som teksten
- Flere like sterke glødflekker som konkurrerer
- En kraftig glød på en lys bakgrunn
- Glød på hver knapp, hvert kort og hvert ikon

### Gjør

- Lys bak et produkt, en form eller et bilde
- En glød ut til den ene siden, med ordene over det rolige området
- Én hovedlyskilde og høyst ett svakere ekko
- En mørk eller dempet bunn så lyset får plass
- Glød forbeholdt den ene tingen som betyr noe

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

- Glødende glør: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Bassenglys: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Scenelys nedenfra: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limegrønt signal: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Vinduslys på papir: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Fiolett lampe: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Fem mørke glødflekker og én lys. Den lyse versjonen fungerer fordi gløden er varmere og lysere enn en allerede blek bunn, ikke fordi den er sterkere.

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](https://gradiently.design/nb/guide/muddy-gradients). Mer om selve formen finner du i [radielle gradienter](https://gradiently.design/nb/guide/radial-gradient).

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

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. **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. **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. **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. **Legg til fint korn** Lange mørke uttoninger er der striper synes mest. Et lett støylag skjuler trinnene; [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) lister alle verdiene.

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

Tre glødflekker, ingen av dem på tekst. To eller tre box-shadows med fallende styrke oppå hverandre gir en mykere kant enn én stor skygge.

| Metode | Best til | Kostnad | Se opp for |
| --- | --- | --- | --- |
| `box-shadow` | Knapper, kort, inndatafelt | Lav | Klippes av `overflow: hidden` på en forelder |
| `radial-gradient`-lag | Lys bak bilder og seksjoner | Lav | Striper i lange mørke uttoninger |
| Form med `filter: blur()` | Toppbakgrunner, kuler med stemning | Høyere, særlig når den er animert | Omtegning ved rulling; hold den i ro eller liten |

Velg den billigste metoden som gir uttrykket. De fleste glødflekker på en side bør være gradienter eller skygger, ikke uskarpe elementer.

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

En stående arrangementsstory der en lys flekk i bakgrunnen ligger rett bak overskriften og vasker den ut

Lys rett gjennom overskriften: det lyseste området lander på bokstavene og gjør dem flate.

Den samme stående arrangementsstoryen med den lyse gløden flyttet bort fra overskriften og et rolig mørkt område bak teksten

Den samme storyen med lyset holdt unna ordene. Gløden setter fortsatt stemningen, og teksten holder seg skarp.

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](https://gradiently.design/nb/guide/auto-ink-legibility).

- Nattbunn: #09071a
- Indigo uttoning: #1e1b4b
- Fiolett lys: #6d28d9
- Lilla kjerne: #c4b5fd
- Varm aksent: #fde68a
- Skarp tekst: #f8fafc

En glødpalett i fire lag: bunn, uttoning, lys og kjerne, pluss én varm aksent og en tekstfarge som aldri tar opp i seg gløden.

## Glød, neon og lyslekkasjer sammenlignet

Disse tre blandes ofte sammen. En glød er mykt, bredt lys fra én kilde. [Neongradienter](https://gradiently.design/nb/guide/neon-gradients) er mettet, elektrisk farge med en tynn, lys strek i midten, nærmere skilting. [Lyslekkasjer](https://gradiently.design/nb/guide/light-leaks) 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.

## FAQ

### Hvordan lager jeg en glødeeffekt i CSS?

Bruk en `box-shadow` uten forskyvning og med stor uskarphet, for eksempel `0 0 24px` i en halvgjennomsiktig farge, eller en radiell gradient som toner ut til gjennomsiktig bak elementet. For den mykeste gløden gjør du en farget form uskarp med `filter: blur()`.

### Bør jeg legge en glød rundt tekst?

Nei. En glorie myker opp bokstavkantene og senker kontrasten, så ordene blir vanskeligere å lese. Hold teksten skarp og legg gløden bak en form eller i bakgrunnen like ved.

### Hvilken bakgrunn får en glød til å skille seg ut?

En mørk eller dempet bunn i samme fargefamilie som gløden, for eksempel en dyp indigo bak et fiolett lys. På en skarp hvit bakgrunn har gløden ingen steder å gå.

### Hvorfor får den glødende gradienten min striper?

Lange, mørke uttoninger har få fargetrinn å jobbe med, så skjermer viser synlige striper. Legg til et lag med fint korn eller eksporter i høyere kvalitet for å skjule dem.

### Hva er forskjellen på en glød og en neoneffekt?

En glød er bredt, mykt lys fra én kilde. Neon er mettet farge med en tynn, intenst lys strek i midten, som et lysrør i et skilt.