Gradient Orbs: leuchtende Kugeln für Heroes und Cover

Ein Gradient Orb ist eine leuchtende Kugel aus einem radialen Verlauf: ein heller Kern, ein Band gesättigter Farbe und ein langer Übergang in einen dunklen Grund. Er ist beliebt für Produktlaunch-Seiten, App-Heroes, Podcast-Artwork und Albumcover, weil eine einzige Form einem Design einen Blickpunkt, Tiefe und Energie gibt, ganz ohne Foto. Das Rezept ist kurz. Was einen eindrucksvollen Orb von einem verschwommenen Fleck unterscheidet, sind der Grund dahinter, die Farbe seines Kerns und wo du ihn platzierst.

Drei Arten von Gradient Orbs

• Weicher Leucht-Orb: gar keine Kante, nur Licht, das aus dem Dunkel aufblüht. Ruhig, atmosphärisch, gut hinter großen Layouts.
• Beleuchtete Kugel: eine scharfe runde Kante mit einem Glanzlicht auf einer Seite, wirkt wie ein Planet oder eine Glaskugel. Kühn und grafisch. Die Lichtregeln stehen in Formen mit Farbverlauf.
• Finsternisring: eine dunkle Scheibe, an deren Rand Licht hervorquillt. Dramatisch, nächtlich, beliebt für Musik und Tech.

Rezepte für Gradient Orbs

Jedes Rezept ist ein einzelnes radial-gradient(), das du in CSS oder ein Design-Tool einfügen kannst. Der erste Stopp ist der Kern, die mittleren Stopps sind der farbige Körper, und der letzte Stopp ist der Grund. Je weiter du den Grund-Stopp nach außen schiebst, desto breiter wird das Leuchten.

Vermeide einen rein weißen Kern. Ein Weiß, das mit der Farbe des Orbs getönt ist, etwa #faf5ff in einem violetten Orb, hält die Mitte leuchtend, ohne ausgebrannt zu wirken. Vermeide auch einen rein schwarzen Grund: Ein fast schwarzer Ton mit einer Spur des Orb-Farbtons lässt das Leuchten wirken, als gehöre es in den Raum.

Warum Orbs einen dunklen Grund brauchen

Leuchten ist Kontrast. Auf einer weißen Seite sieht derselbe violette Orb aus wie ein blauer Fleck; auf tiefem Tintengrund sieht er aus wie Licht. Wenn deine Marke auf hellen Hintergründen lebt, nimm einen blassen Pastell-Orb mit weichem, breitem Auslauf und akzeptiere, dass er wie ein Farbschleier wirkt statt wie ein Leuchten. Dunkle Verlaufshintergründe hat Gründe, die zu jedem Orb oben passen.

Wo ein Gradient Orb hingehört

Ein Orb ist das Hellste im Bild, also zieht er den Blick vor allem anderen an. Das ist ein Geschenk, wenn deine Überschrift daneben steht, und ein Problem, wenn sie darauf steht. Setz den Orb hoch und seitlich, schneide ihn am Rand an, wenn er groß ist, und halte die Worte auf ruhigem, dunklem Grund. Nutz einen Orb nie als Leuchten hinter Text: Er senkt den Kontrast genau dort, wo du ihn am meisten brauchst.

Ein Gradient-Orb-Hero in CSS

Am einfachsten ist eine Ebene mit radialem Verlauf auf der Section selbst. Für ein weicheres, organischeres Leuchten nimm ein eigenes rundes Element mit starkem Weichzeichner, das du auch langsam animieren kannst, ohne die ganze Section neu zu zeichnen.

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

Einen Gradient Orb animieren

Ein Orb, der ein paar Prozent übers Bild treibt oder leicht größer und kleiner atmet, wirkt lebendig, ohne von den Worten abzulenken. Halte den Zyklus lang, irgendwo zwischen 10 und 20 Sekunden, und lass ihn weich ein- und ausklingen, damit die Bewegung nie zu beginnen oder zu enden scheint. Für Social-Formate exportierst du ihn als kurzen Loop, dessen letztes Bild dem ersten gleicht: Nahtlose Loop-Videos erklärt, wie. Im Web bewegst du das weichgezeichnete Element mit transform und schaltest die Bewegung für Besucher ab, die reduzierte Bewegung wünschen.

So wirkt ein Gradient Orb originell

Der Orb ist inzwischen so verbreitet, dass ein Standard-Orb wie eine Vorlage aussieht. Ein zweites, schwächeres Licht, eine Farbtonverschiebung im Auslauf oder eine Schicht Körnung bringen ihn alle näher an etwas Wiedererkennbares. Die Marks von Gradiently gehen weiter: Jeder ist ein lebendiger Hintergrund mit eigenem Licht, eigenen Materialien und eigener Bewegung, so geprüft, dass keine zwei gleich aussehen, und er rendert in jeder Größe, in der du gestaltest. Stöbere im Markt nach dunklen Marks und gestalte kostenlos mit jedem, der noch nicht gesichert ist.