# Gradientkuler: glødende former til toppbilder og omslag

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

Én glødende kule på mørk bunn kan bære en hel landingsside eller et albumomslag. Den ser enkel ut, men er lett å gjøre feil. Her er oppskriftene og plasseringsreglene.

## The short version

- En gradientkule er en glødende kule laget av en radiell gradient, gjerne med lys kjerne som toner gjennom en mettet farge til en mørk bunn.
- Kuler finnes i tre vanlige stiler: myk glød uten kant, en belyst kule med skarp kant og en formørkelsesring med mørkt sentrum.
- En kule gløder overbevisende bare på en mørk eller dypt farget bunn, fordi glød er kontrast mot omgivelsene.
- Plasser kulen unna overskriften, gjerne høyt på én side, og la ordene ligge på den rolige bunnen.
- I CSS er en kule et radielt gradientlag eller et uskarpt sirkelelement plassert bak innholdet.

En **gradientkule** er en glødende kule laget med en radiell gradient: en lys kjerne, et bånd med mettet farge og en lang overgang til mørk bunn. Den har blitt populær på produktlanseringssider, i appenes toppfelt, på podkastgrafikk og albumomslag fordi én form gir designet et fokuspunkt, dybde og energi uten et eneste foto. Oppskriften er kort. Det som skiller en slående kule fra en uskarp klump, er bunnen bak, kjernefargen og plasseringen.

## Tre typer gradientkuler

- **Kule med myk glød:** ingen kant, bare lys som brer seg ut fra mørket. Rolig og stemningsfull, god bak store oppsett.
- **Belyst kule:** en skarp rund kant med høylys på én side, som en planet eller glasskule. Kraftig og grafisk. Lysreglene finnes i [gradientformer](https://gradiently.design/nb/guide/gradient-shapes).
- **Formørkelsesring:** en mørk skive med lys som sprer seg rundt kanten. Dramatisk, nattlig og populær til musikk og teknologi.

## Oppskrifter på gradientkuler

Hver oppskrift er én `radial-gradient()` du kan lime inn i CSS eller et designverktøy. Første stopp er kjernen, de midterste stoppene er den fargede kroppen, og det siste er bunnen. Flytter du bunnstoppet utover, blir gløden bredere.

- Fiolett glød: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Cyanglød: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Glød fra glør: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Smaragdglød: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Formørkelsesring: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Iriserende glød: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Seks kuler på mørke bunner. Den iriserende skifter fargetone mens den toner ut, fra rosa til fiolett til blått, og virker dermed blank.

Unngå en helt hvit kjerne. Hvitt med et skjær av kulens egen farge, som `#faf5ff` i en fiolett kule, holder sentrum lysende uten at det virker utbrent. Unngå også helt svart bunn: nesten svart med litt av kulens fargetone gjør at gløden hører hjemme i rommet.

## Hvorfor kuler trenger mørk bunn

Glød er kontrast. På en hvit side ligner den samme fiolette kulen et blåmerke; på dyp blekkfarget bunn ser den ut som lys. Hvis merkevaren bruker lyse bakgrunner, velg en blek pastellkule med myk, bred overgang og godta at den blir et fargeskjær fremfor glød. [Mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) har bunner som passer alle kulene over.

- Blekkfiolett bunn: #0b0a1a
- Blekkblå bunn: #020617
- Blekkrød bunn: #0c0507
- Blekkgrønn bunn: #010805

Fire nesten svarte farger, hver tonet mot en kule. Tilpass bunnen til kulen, og gløden virker naturlig.

## Hvor du bør plassere en gradientkule

Kulen er det lyseste i bildet og trekker derfor blikket først. Det er nyttig hvis overskriften ligger ved siden av, og et problem hvis den ligger oppå. Plasser kulen høyt på én side, beskjær den ved kanten hvis den er stor, og hold ordene på rolig, mørk bunn. Bruk aldri en kule som glød bak tekst: det svekker kontrasten akkurat der du trenger den mest.

- Toppbilde nettsted 1920×1080: 1920 × 1080
- Instagram-innlegg 1080×1350: 1080 × 1350
- Spillelisteomslag 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

På et bredt toppbilde plasserer du kulen på motsatt side av overskriften. I høye formater legger du den i øvre tredel med ordene under.

Et kvadratisk podkastomslag med glødende fiolett lys høyt i bildet og programtittelen under på mørk bunn

Et podkastomslag på 3000×3000. Lyset ligger over tittelen, aldri under den.

Et bredt produktlanseringsbanner med overskrift til venstre og et lyst glødende område til høyre

Et lanseringstoppbilde på 1920×1080, med ordene til venstre og det lyseste området til høyre.

## Et toppfelt med gradientkule i CSS

Den enkleste metoden er et radielt gradientlag på selve seksjonen. For en mykere, mer organisk glød bruker du et eget sirkelelement med kraftig uskarphet. Det lar deg også animere det sakte uten å tegne hele seksjonen på nytt.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

En fiolett kule øverst til høyre på blekkfarget bunn, med svakt cyanlys nedenfra til venstre. Innholdet ligger over begge.

> **Stor uskarphet har en kostnad** En stor `filter: blur()` på et bevegelig element kan gi tapte bilderuter på eldre mobiler. Animer bare `transform`, hold uskarphetsradiusen moderat og les [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance) før publisering.

## Animer en gradientkule

En kule som driver noen prosent over bildet, eller puster ved å bli litt større og mindre, føles levende uten å distrahere fra ordene. Hold syklusen lang, mellom 10 og 20 sekunder, og la den starte og stoppe mykt så bevegelsen virker kontinuerlig. Til sosiale formater eksporterer du en kort løkke der siste bilderute samsvarer med den første: [sømløs videoløkke](https://gradiently.design/nb/guide/seamless-loop-video) forklarer hvordan. På nettet flytter du det uskarpe elementet med `transform` og slår av bevegelsen for besøkende som ber om [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion).

## Slik gir du gradientkulen et eget uttrykk

### Generisk kule

- Lilla til blått, sentrert på svart
- Helt hvit kjerne som brenner ut
- Plassert bak overskriften
- Helt jevn, med synlige bånd i overgangen

### Gjennomtenkt kule

- En merkevarefarge med toneskifte i overgangen
- En tonet kjerne som forblir lysende
- Forskjøvet og beskåret, med ord på rolig bunn
- Fint korn over overgangen for jevnhet

Kulen er nå så vanlig at en standardvariant ser ut som en mal. Et ekstra, svakere lys, et toneskifte i overgangen eller et lag med [korn](https://gradiently.design/nb/guide/grainy-gradients) gir mer særpreg. Marks i Gradiently går lenger: hver er en levende bakgrunn med eget lys, materialer og bevegelse, kontrollert så ingen to ligner, og gjengitt i alle størrelser du designer i. Utforsk mørke Marks på Markedet og design gratis med enhver ledig Mark.

## FAQ

### Hvordan lager jeg en gradientkule?

Bruk en radiell gradient med tonet hvit kjerne, et mettet fargebånd og mørk bunn, for eksempel `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Hvilken bakgrunn fungerer best bak en gradientkule?

Nesten svart med et skjær av kulens farge. Glød oppfattes bare som glød mot mørke omgivelser.

### Kan jeg legge tekst oppå en gradientkule?

Unngå det. Kulen er den lyseste delen av bildet, så tekst over den mister kontrast. Plasser kulen til én side og hold ordene på rolig bunn.

### Hvordan lager jeg en uskarp kule i CSS?

Lag et sirkelelement med en radiell gradient som toner ut til transparent, og bruk `filter: blur()`. Plasser det absolutt bak innholdet.