# Gradientkugler: glødende sfærer til heroes og covers

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

Én glødende sfære på en mørk bund kan bære en hel landingsside eller et albumcover. Den ser ubesværet ud, og den er let at gøre forkert. Her er opskrifterne og reglerne for placering.

## The short version

- En gradientkugle er en glødende sfære lavet af en radial gradient, som regel en klar kerne, der toner gennem en mættet farve ud i en mørk bund.
- Kugler findes i tre almindelige stilarter: en blød glød uden kant, en belyst sfære med en skarp kant og en formørkelsesring med et mørkt centrum.
- En kugle gløder kun overbevisende på en mørk eller dybt farvet bund, fordi glød er kontrast til omgivelserne.
- Placér kuglen væk fra overskriften, som regel højt og til den ene side, og lad ordene stå på den rolige bund.
- I CSS er en kugle et radialt gradientlag eller et sløret, rundt element placeret bag indholdet.

En **gradientkugle** er en glødende sfære lavet med en radial gradient: en klar kerne, et bånd af mættet farve og en lang overgang ud i en mørk bund. Den er blevet en favorit til lanceringssider, app-heroes, podcastgrafik og albumcovers, fordi én form giver et design et fokuspunkt, dybde og en følelse af energi uden et eneste foto. Opskriften er kort. Det, der skiller en slående kugle fra en sløret klat, er bunden bag den, farven på dens kerne, og hvor du placerer den.

## Tre slags gradientkugler

- **Blød glødekugle:** ingen kant overhovedet, bare lys, der blomstrer ud af mørket. Rolig, atmosfærisk, god bag store layouts.
- **Belyst sfære:** en skarp, rund kant med et højlys på den ene side, som læses som en planet eller en glaskugle. Modig og grafisk. Reglerne for lys står i [gradientformer](https://gradiently.design/da/guide/gradient-shapes).
- **Formørkelsesring:** en mørk skive med lys, der vælter ud rundt om kanten. Dramatisk, natlig, populær til musik og tech.

## Opskrifter på gradientkugler

Hver opskrift er en enkelt `radial-gradient()`, du kan indsætte i CSS eller et designværktøj. Det første stop er kernen, de midterste stop er den farvede krop, og det sidste stop er bunden. Skubber du bundens stop længere ud, bliver gløden bredere.

- Violet glød: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Cyan glød: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Gløder: `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 kugler på mørke bunde. Den iriserende skifter farvetone, mens den toner ud, fra pink over violet til blå, hvilket læses som en blank overflade.

Undgå en ren hvid kerne. En hvid tonet med kuglens egen farve, som `#faf5ff` i en violet kugle, holder midten lysende uden at se udbrændt ud. Undgå også en ren sort bund: en næsten sort med et strejf af kuglens farvetone får gløden til at føles, som om den hører hjemme i rummet.

## Hvorfor kugler har brug for en mørk bund

Glød er kontrast. På en hvid side ligner den samme violette kugle et blåt mærke; på en dyb blækfarvet bund ligner den lys. Lever dit brand på lyse baggrunde, så brug en bleg pastelkugle med en blød, bred overgang, og acceptér, at den læses som en blomstring af farve frem for en glød. [Mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) har bunde, der passer godt til hver kugle ovenfor.

- Blækviolet bund: #0b0a1a
- Blækmarineblå bund: #020617
- Blækrød bund: #0c0507
- Blækgrøn bund: #010805

Fire næsten sorte toner, hver tonet mod én kugle. Match bunden til kuglen, og gløden ser naturlig ud.

## Hvor du placerer en gradientkugle

En kugle er det lyseste i billedet, så den trækker øjet før alt andet. Det er en gave, hvis din overskrift står ved siden af den, og et problem, hvis overskriften står oven på den. Placér kuglen højt og til den ene side, beskær den ved kanten, hvis den er stor, og hold ordene på en rolig, mørk bund. Brug aldrig en kugle som glød bag tekst: den sænker kontrasten præcis dér, hvor du har mest brug for den.

- Website-hero 1920×1080: 1920 × 1080
- Instagram-opslag 1080×1350: 1080 × 1350
- Playlistecover 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

På en bred hero placerer du kuglen på den modsatte side af overskriften. På høje formater placerer du den i den øverste tredjedel med ordene nedenunder.

Et kvadratisk podcastcover med et glødende violet lys højt i billedet og programmets titel nedenunder på mørk bund

Et podcastcover i 3000×3000. Lyset sidder over titlen, aldrig under den.

Et bredt banner til en produktlancering med overskriften til venstre og et klart glødende område til højre

En lanceringshero i 1920×1080, med ordene til venstre og det lyseste område til højre.

## En hero med gradientkugle i CSS

Den enkleste metode er et radialt gradientlag på selve sektionen. Til en blødere, mere organisk glød bruger du et separat rundt element med kraftig sløring, som også lader dig animere det langsomt uden at gentegne hele sektionen.

```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 violet kugle øverst til højre på en blækfarvet bund, med et svagt cyan lys, der siver ind nederst fra venstre. Indholdet ligger over begge.

> **Store sløringer koster noget** En stor `filter: blur()` på et element i bevægelse kan tabe billeder på ældre telefoner. Animér kun `transform`, hold sløringsradius beskeden, og læs [ydeevne for CSS-gradienter](https://gradiently.design/da/guide/css-gradient-performance), før du udgiver.

## Animation af en gradientkugle

En kugle, der driver et par procent hen over billedet, eller ånder en smule større og mindre, føles levende uden at tage opmærksomheden fra ordene. Hold cyklussen lang, et sted mellem 10 og 20 sekunder, og lad den accelerere og bremse blødt, så bevægelsen aldrig ser ud til at starte eller stoppe. Til sociale formater eksporterer du den som et kort loop, hvor det sidste billede matcher det første: [sømløs loopvideo](https://gradiently.design/da/guide/seamless-loop-video) forklarer hvordan. På nettet flytter du det slørede element med `transform` og slår bevægelsen fra for besøgende, der beder om [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).

## Sådan får du en gradientkugle til at se original ud

### Generisk kugle

- Lilla til blå, centreret, på sort
- Ren hvid kerne, der klipper
- Placeret bag overskriften
- Helt glat, med banding i overgangen

### Gennemtænkt kugle

- En brandfarve med et skift i farvetone i overgangen
- En tonet kerne, der forbliver lysende
- Forskudt, beskåret, med ord på rolig bund
- Fint korn over overgangen, så den holdes glat

Kuglen er nu så almindelig, at en standardudgave ligner en skabelon. Et andet, svagere lys, et skift i farvetone i overgangen eller et lag [korn](https://gradiently.design/da/guide/grainy-gradients) flytter den alle mod noget genkendeligt. Marks fra Gradiently går længere: hver er en levende baggrund med sit eget lys, sine egne materialer og sin egen bevægelse, kontrolleret, så ingen to ligner hinanden, og den gengives i alle størrelser, du designer i. Gennemse mørke Marks på Markedet, og design gratis med enhver, ingen har sikret sig.

## FAQ

### Hvordan laver jeg en gradientkugle?

Brug en radial gradient med en tonet hvid kerne, et mættet farvebånd og en mørk bund, for eksempel `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Hvilken baggrund fungerer bedst bag en gradientkugle?

En næsten sort tonet mod kuglens farve. Glød læses kun som glød mod mørke omgivelser.

### Kan jeg sætte tekst oven på en gradientkugle?

Undgå det. Kuglen er den lyseste del af billedet, så tekst oven på den mister kontrast. Placér kuglen til den ene side, og hold ordene på en rolig bund.

### Hvordan laver jeg en sløret kugle i CSS?

Lav et rundt element med en radial gradient, der toner ud til gennemsigtig, og tilføj `filter: blur()`. Placér det absolut bag indholdet.