# Glow-effekt i design: blødt lys uden glorier om teksten

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

En glow skal ligne lys, der falder på en flade: en lys kerne, en lang aftoning og et mørkt rum omkring. Læg den bag former og ind i baggrunde, og hold den væk fra bogstavernes kanter.

## The short version

- En glow-effekt er en lys kerne af farve, der gradvist toner ud i en mørkere omgivelse, så den læses som lys og ikke som maling.
- Glow virker bedst på former, knapper, produktfotos og baggrunde, hvor den giver dybde og leder øjet.
- En glorie af glow om tekst udvisker bogstavernes kanter og gør dem sværere at læse, så hold ordene skarpe og læg lyset et andet sted.
- I CSS er en blød glow som regel en radial gradient, der toner ud til gennemsigtig, eller en box shadow med stor sløring og ingen forskydning.
- En glow har brug for en mørk eller dæmpet bund for at kunne ses, og lidt korn forhindrer, at dens lange aftoning får bånd.

En **glow-effekt** er en plet lys: en lys kerne af farve, der langsomt toner ud i en mørkere omgivelse, som om en lampe sad lige bag fladen. Brugt rigtigt giver den et fladt design dybde og trækker øjet hen mod et produkt, en knap eller en form. Brugt dårligt bliver den en uskarp ring om overskriften. Reglen, hele denne side følger, er enkel: læg glowen på former og baggrunde, og hold ordene skarpe.

## Hvor en glow hører hjemme, og hvor ikke

Lys omkring en genstand siger, at genstanden er vigtig. Lys omkring bogstaver gør noget andet: det blødgør deres kanter, sænker kontrasten mellem streg og baggrund og får linjen til at se uskarp ud på små skærme. Derfor skal glowen ligge nær ordene, aldrig vikle sig om dem. Hvis skrift har brug for hjælp for at kunne læses, så ret op på området bag den i stedet. [Alternativer til tekstskygge](https://gradiently.design/da/guide/text-shadow-alternatives) gennemgår de renere muligheder.

### Undgå

- En sløret glorie, der klistrer sig til overskriften
- Glow i samme farve som skriften
- Flere glows af samme styrke, der konkurrerer
- En kraftig glow på en lys baggrund
- Glow tilføjet til hver knap, kort og ikon

### Gør

- Lys bag et produkt, en form eller et foto
- En glow ud til den ene side og ord over det rolige område
- Ét hovedlys og højst ét svagere ekko
- En mørk eller dæmpet bund, så lyset har plads
- Glow forbeholdt den ene ting, der betyder noget

## Glow-baggrunde med koder

Den nemmeste glødende baggrund er en radial gradient, der starter lys, falder hurtigt gennem en rigere mellemtone og toner ud i en næsten sort bund. Flytter du midten væk fra centrum, føles den som en lyskilde og ikke som en skydeskive.

- Ildglød: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Lyspøl: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Scenelys nedefra: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limesignal: `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%)`
- Violet lampe: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Fem mørke glows og én lys. Den lyse version virker, fordi glowen er varmere og lysere end en i forvejen bleg bund, ikke fordi den er stærkere.

Hver af dem har tre dele: en kerne, der ligger tæt på hvid eller meget bleg, et mættet mellemstop og en dyb bund i samme familie. Springer du mellemstoppet over, ser glowen grå ud, hvor den møder det mørke, og det er problemet, der beskrives i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients). Mere om selve formen finder du i [radiale gradienter](https://gradiently.design/da/guide/radial-gradient).

## Sådan laver du en glow, der ligner rigtigt lys

1. **Start med en mørk eller dæmpet bund** Lys har brug for mørke for at blive set. Et blåsort, et dybt grønt eller en støvet papirtone virker alle sammen, mens en skinnende hvid bund ikke giver glowen noget sted at gå hen.
2. **Giv kernen en lysere, varmere tone** Rigtigt lys er lysest og mindst mættet i midten. Gør kernen til en bleg udgave af glowens farve, for eksempel `#fde68a` til en orange glow.
3. **Lad den falde langsomt af** Aftoningen skal løbe over et stort område, ofte halvdelen af billedet. En kort aftoning ligner en projektør, der er klippet ud med saks.
4. **Beslut, hvor lyset kommer fra** Placér kernen nær en kant eller et hjørne eller bag det objekt, den belyser. Hold så resten af designet i overensstemmelse med den retning.
5. **Tilføj fint korn** Lange mørke aftoninger er der, hvor bånd ses mest. Et let støjlag skjuler trinene, og [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) viser metoden.

Endnu en test: slå glowen fra og se igen. Virker designet stadig, tilføjer glowen stemning. Falder det fra hinanden, gør glowen et arbejde, som layout eller kontrast burde gøre.

## Glow-effekt i CSS

Der er tre pålidelige måder at lave en glow på nettet. En `box-shadow` uden forskydning og med stor sløring lyser kanterne på et kort eller en knap op. En radial gradient på et pseudoelement lægger en blød lyspøl bag et objekt. Og `filter: blur()` på en farvet form giver det blødeste resultat, til en højere gengivelsespris. [MDN's reference til box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) opregner alle værdier.

```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 glows, ingen af dem på tekst. Stabler du to eller tre box shadows med faldende styrke, får du en blødere kant end med én stor skygge.

| Metode | Bedst til | Pris | Pas på |
| --- | --- | --- | --- |
| `box-shadow` | Knapper, kort, inputfelter | Lav | Klippes af `overflow: hidden` på en forælder |
| Lag med `radial-gradient` | Lys bag billeder og sektioner | Lav | Bånd på lange mørke aftoninger |
| Form med `filter: blur()` | Hero-baggrunde, ambiente kugler | Højere, især når den animeres | Pris ved gentegning under scroll; hold den stille eller lille |

Vælg den billigste metode, der giver udtrykket. De fleste glows på en side bør være gradienter eller skygger, ikke slørede elementer.

På knapper skal du holde glowen diskret og teksten skarp: lyset hører til knappens form, ikke til dens ord. Den fulde skyggesyntaks står i [CSS box shadow](https://gradiently.design/da/guide/css-box-shadow).

## Glow i opslag, plakater og stories

I et stillestående design gør en glow mest nytte bag motivet eller i den tomme halvdel af billedet. Læg lyset der, hvor øjet først skal lande, og sæt overskriften over den mørkere, roligere del af bunden. Lyset fører læseren hen til ordene uden at røre dem.

En lodret eventstory, hvor en lys plet i baggrunden sidder lige bag overskriften og vasker den ud

Lys, der går lige gennem overskriften: det lyseste område lander på bogstaverne og fladtrykker dem.

Den samme lodrette eventstory med den kraftige glow flyttet væk fra overskriften og et roligt mørkt område bag teksten

Den samme story, hvor lyset holdes fri af ordene. Glowen sætter stadig stemningen, og skriften forbliver skarp.

Det er præcis det, en Gradiently Mark gør af sig selv. Dens roligste område lægger sig bag ordene, farver nær bogstaverne bliver dybere eller lysere, og Automatisk tekstfarve vælger lys eller mørk skrift for hver linje ud fra Markens palette, så der ikke skal tilføjes kasser, skygger eller glorier. Du kan se ideen i [Automatisk tekstfarve](https://gradiently.design/da/guide/auto-ink-legibility).

- Natbund: #09071a
- Indigoaftoning: #1e1b4b
- Violet lys: #6d28d9
- Lilla kerne: #c4b5fd
- Varm accent: #fde68a
- Skarp skrift: #f8fafc

En glow-palette i fire lag: bund, aftoning, lys og kerne, plus én varm accent og en skriftfarve, der aldrig får glowen på sig.

## Glow, neon og lyslækager sammenlignet

De tre bliver blandet sammen. En glow er blødt, bredt lys fra én kilde. [Neongradienter](https://gradiently.design/da/guide/neon-gradients) er mættet, elektrisk farve med en tynd lys linje i hjertet, tættere på skiltning. [Lyslækager](https://gradiently.design/da/guide/light-leaks) er varme striber, der efterligner film, og som regel kommer ind fra en kant. Alle tre har brug for en mørk bund, og alle tre holder sig fra skriften. Vil du have lyset til at drive og skifte, er aurora-gradienter en bevægelig slægtning.

## FAQ

### Hvordan laver jeg en glow-effekt i CSS?

Brug en `box-shadow` uden forskydning og med stor sløring, for eksempel `0 0 24px` i en halvgennemsigtig farve, eller en radial gradient, der toner ud til gennemsigtig bag elementet. Til den blødeste glow kan du sløre en farvet form med `filter: blur()`.

### Skal jeg lægge en glow om tekst?

Nej. En glorie blødgør bogstavernes kanter og sænker kontrasten, så ordene bliver sværere at læse. Hold teksten skarp, og læg glowen bag en form eller i baggrunden i nærheden.

### Hvilken baggrund får en glow til at skille sig ud?

En mørk eller dæmpet bund i samme farvefamilie som glowen, for eksempel en dyb indigo bag et violet lys. På en skinnende hvid baggrund har en glow ingen steder at gå hen.

### Hvorfor har min glødende gradient bånd?

Lange, mørke aftoninger har få farvetrin at arbejde med, så skærme viser synlige bånd. Tilføj et lag fint korn eller eksportér i højere kvalitet for at skjule dem.

### Hvad er forskellen på en glow og en neoneffekt?

En glow er bredt, blødt lys fra én kilde. Neon er mættet farve med en tynd, intenst lys linje i midten, som på et skiltrør.