# Gradient orbs: gloeiende bollen voor heroes en covers

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

Eén gloeiende bol op een donkere ondergrond kan een hele landingspagina of albumcover dragen. Het ziet er moeiteloos uit en gaat toch makkelijk mis. Dit zijn de recepten en de plaatsingsregels.

## The short version

- Een gradient orb is een gloeiende bol van een radiaal verloop: meestal een heldere kern die via een verzadigde kleur overgaat in een donkere ondergrond.
- Orbs komen in drie gangbare stijlen: een zachte gloed zonder rand, een verlichte bol met een scherpe rand en een eclipsring met een donker midden.
- Een orb gloeit alleen overtuigend op een donkere of diep gekleurde ondergrond, want gloed is contrast met de omgeving.
- Plaats de orb weg van de kop, meestal hoog en aan één kant, en laat de tekst op de rustige ondergrond staan.
- In CSS is een orb een radiaal-verloop-laag of een vervaagd rond element achter de inhoud.

Een **gradient orb** is een gloeiende bol van een radiaal verloop: een heldere kern, een band verzadigde kleur en een lange uitloop naar een donkere ondergrond. De orb is een favoriet geworden voor productlanceringen, app-heroes, podcastbeeld en albumcovers, omdat één vorm een ontwerp een brandpunt, diepte en energie geeft zonder één foto. Het recept is kort. Wat een opvallende orb scheidt van een vage vlek is de ondergrond erachter, de kleur van de kern en de plek waar je hem zet.

## Drie soorten gradient orb

- **Zachte gloed-orb:** helemaal geen rand, alleen licht dat uit het donker opbloeit. Rustig, sfeervol, goed achter grote lay-outs.
- **Verlichte bol:** een scherpe ronde rand met een highlight aan één kant, als een planeet of een glazen bal. Gedurfd en grafisch. De lichtregels staan in [gradient shapes](https://gradiently.design/nl/guide/gradient-shapes).
- **Eclipsring:** een donkere schijf met licht dat langs de rand naar buiten valt. Dramatisch, nachtelijk, populair voor muziek en tech.

## Gradient orb-recepten

Elk recept is één `radial-gradient()` die je in CSS of een ontwerptool plakt. De eerste stop is de kern, de middelste stops vormen het gekleurde lichaam en de laatste stop is de ondergrond. Schuif je de ondergrondstop verder naar buiten, dan wordt de gloed breder.

- Violette gloed: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Cyaan gloed: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Gloed van sintels: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Smaragdgroene gloed: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Eclipsring: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Iriserende gloed: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Zes orbs op donkere ondergronden. De iriserende verschuift van tint naarmate hij uitloopt, van roze via violet naar blauw, wat als glanzend oppervlak leest.

Vermijd een zuiver witte kern. Een wit met de eigen kleur van de orb erin, zoals `#faf5ff` in een violette orb, houdt het midden stralend zonder dat het uitbrandt. Vermijd ook een zuiver zwarte ondergrond: een bijna-zwart met een vleugje tint van de orb laat de gloed in de ruimte passen.

## Waarom orbs een donkere ondergrond nodig hebben

Gloed is contrast. Op een witte pagina ziet dezelfde violette orb eruit als een blauwe plek; op een diepe inktondergrond ziet hij eruit als licht. Leeft je merk op lichte achtergronden, gebruik dan een bleke pastelorb met een zachte, brede uitloop en accepteer dat hij leest als een bloei van kleur in plaats van een gloed. [Donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) heeft ondergronden die bij elke orb hierboven passen.

- Inktviolette ondergrond: #0b0a1a
- Inktmarineblauwe ondergrond: #020617
- Inktrode ondergrond: #0c0507
- Inktgroene ondergrond: #010805

Vier bijna-zwarten, elk getint naar één orb. Stem de ondergrond af op de orb en de gloed ziet er natuurlijk uit.

## Waar je een gradient orb plaatst

Een orb is het helderste in het beeld en trekt dus eerst het oog. Dat is een cadeau als je kop ernaast staat en een probleem als de kop er bovenop staat. Zet de orb hoog en aan één kant, snij hem aan de rand af als hij groot is en houd de tekst op rustige, donkere ondergrond. Gebruik een orb nooit als gloed achter tekst: dat verlaagt het contrast precies waar je het het hardst nodig hebt.

- Website-hero 1920×1080: 1920 × 1080
- Instagrampost 1080×1350: 1080 × 1350
- Playlistcover 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

Zet de orb op een brede hero aan de kant tegenover de kop. Zet hem in hoge formaten in het bovenste derde deel, met de tekst eronder.

Een vierkante podcastcover met een gloeiend violet licht hoog in beeld en de titel van de show eronder op donkere ondergrond

Een podcastcover van 3000×3000. Het licht staat boven de titel, nooit eronder.

Een brede productlanceringsbanner met de kop links en een helder gloeiend gebied rechts

Een lanceringshero van 1920×1080, met de tekst links en het helderste gebied rechts.

## Een gradient orb-hero in CSS

De eenvoudigste methode is een radiaal-verloop-laag op de sectie zelf. Voor een zachtere, organischere gloed gebruik je een apart rond element met een sterke blur, wat je ook langzaam laat animeren zonder de hele sectie opnieuw te tekenen.

```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;
}
```

Een violette orb rechtsboven op een inktondergrond, met een zwak cyaan licht dat linksonder binnenvalt. De inhoud ligt boven beide.

> **Grote blurs kosten iets** Een grote `filter: blur()` op een bewegend element kan op oudere telefoons beelden laten vallen. Animeer alleen `transform`, houd de blurradius bescheiden en lees [CSS-verloopprestaties](https://gradiently.design/nl/guide/css-gradient-performance) voordat je live gaat.

## Een gradient orb animeren

Een orb die een paar procent door het beeld drijft, of iets groter en kleiner ademt, voelt levend aan zonder af te leiden van de tekst. Houd de cyclus lang, ergens tussen 10 en 20 seconden, en laat hem in- en uitlopen zodat de beweging nooit lijkt te starten of te stoppen. Exporteer hem voor sociale formaten als korte loop waarvan het laatste beeld aansluit op het eerste: [naadloze loopvideo](https://gradiently.design/nl/guide/seamless-loop-video) legt uit hoe. Beweeg op het web het vervaagde element met `transform` en zet de beweging uit voor bezoekers die om [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion) vragen.

## Hoe je een gradient orb origineel laat ogen

### Generieke orb

- Paars naar blauw, gecentreerd, op zwart
- Zuiver witte kern die uitbrandt
- Achter de kop geplaatst
- Perfect glad, met banding in de uitloop

### Doordachte orb

- Een merkkleur met een tintverschuiving in de uitloop
- Een getinte kern die stralend blijft
- Verschoven, afgesneden, met tekst op rustige ondergrond
- Fijne korrel over de uitloop om hem glad te houden

De orb is inmiddels zo gewoon dat een standaardexemplaar op een template lijkt. Een tweede, zwakker licht, een tintverschuiving in de uitloop of een laag [korrel](https://gradiently.design/nl/guide/grainy-gradients) brengen hem dichter bij iets herkenbaars. De Marks van Gradiently gaan verder: elke Mark is een levende achtergrond met eigen licht, materialen en beweging, gecontroleerd zodat er geen twee op elkaar lijken, en hij rendert op elk formaat waarin je ontwerpt. Blader door donkere Marks in de Markt en ontwerp gratis met elke Mark die nog niet geclaimd is.

## FAQ

### Hoe maak je een gradient orb?

Gebruik een radiaal verloop met een getinte witte kern, een verzadigde kleurband en een donkere ondergrond, bijvoorbeeld `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Welke achtergrond werkt het best achter een gradient orb?

Een bijna-zwart, getint naar de kleur van de orb. Gloed leest alleen als gloed tegen een donkere omgeving.

### Kan ik tekst op een gradient orb zetten?

Liever niet. De orb is het helderste deel van het beeld, dus tekst erop verliest contrast. Zet de orb aan één kant en houd de tekst op rustige ondergrond.

### Hoe maak ik een vage orb in CSS?

Maak een rond element met een radiaal verloop dat uitloopt naar transparant en pas dan `filter: blur()` toe. Positioneer het absoluut achter de inhoud.