Gradient orbs: gloeiende bollen voor heroes en covers

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

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 heeft ondergronden die bij elke orb hierboven passen.

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.

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.

.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 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 legt uit hoe. Beweeg op het web het vervaagde element met transform en zet de beweging uit voor bezoekers die om verminderde beweging vragen.

Hoe je een gradient orb origineel laat ogen

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