# Gradient Orbs: leuchtende Kugeln für Heroes und Cover

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

Eine leuchtende Kugel auf dunklem Grund kann eine ganze Landingpage oder ein Albumcover tragen. Das wirkt mühelos und geht leicht schief. Hier sind die Rezepte und die Regeln für die Platzierung.

## The short version

- Ein Gradient Orb ist eine leuchtende Kugel aus einem radialen Verlauf, meist ein heller Kern, der über eine gesättigte Farbe in einen dunklen Grund ausläuft.
- Orbs gibt es in drei gängigen Stilen: ein weiches Leuchten ohne Kante, eine beleuchtete Kugel mit scharfer Kante und ein Finsternisring mit dunkler Mitte.
- Ein Orb leuchtet nur auf dunklem oder tief farbigem Grund überzeugend, weil Leuchten Kontrast zur Umgebung ist.
- Platzier den Orb abseits der Überschrift, meist hoch und seitlich, und lass die Worte auf dem ruhigen Grund stehen.
- In CSS ist ein Orb eine Ebene mit radialem Verlauf oder ein weichgezeichnetes rundes Element hinter dem Inhalt.

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](https://gradiently.design/de/guide/gradient-shapes).
- **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.

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

Sechs Orbs auf dunklem Grund. Der schillernde verschiebt beim Auslaufen den Farbton, Pink zu Violett zu Blau, was wie eine glänzende Oberfläche wirkt.

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](https://gradiently.design/de/guide/dark-gradient-backgrounds) hat Gründe, die zu jedem Orb oben passen.

- Tintenvioletter Grund: #0b0a1a
- Tintenblauer Grund: #020617
- Tintenroter Grund: #0c0507
- Tintengrüner Grund: #010805

Vier fast schwarze Töne, jeder zu einem Orb hin getönt. Stimm den Grund auf den Orb ab, und das Leuchten wirkt natürlich.

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

- Website-Hero 1920×1080: 1920 × 1080
- Instagram-Post 1080×1350: 1080 × 1350
- Playlist-Cover 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

Auf einem breiten Hero setz den Orb auf die der Überschrift gegenüberliegende Seite. Bei hohen Formaten ins obere Drittel, mit den Worten darunter.

Ein quadratisches Podcast-Cover mit einem leuchtenden violetten Licht weit oben im Bild und dem Titel der Show darunter auf dunklem Grund

Ein Podcast-Cover in 3000×3000. Das Licht sitzt über dem Titel, nie darunter.

Ein breites Banner zum Produktlaunch mit der Überschrift links und einem hell leuchtenden Bereich rechts

Ein Launch-Hero in 1920×1080, mit den Worten links und dem hellsten Bereich rechts.

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

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

Ein violetter Orb oben rechts auf Tintengrund, mit einem schwachen Cyan-Licht, das von unten links hereinfließt. Der Inhalt liegt über beiden.

> **Große Weichzeichner kosten etwas** Ein großes `filter: blur()` auf einem bewegten Element kann auf älteren Handys Bilder fallen lassen. Animiere nur `transform`, halte den Radius moderat und lies [Performance von CSS-Verläufen](https://gradiently.design/de/guide/css-gradient-performance), bevor du live gehst.

## 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](https://gradiently.design/de/guide/seamless-loop-video) erklärt, wie. Im Web bewegst du das weichgezeichnete Element mit `transform` und schaltest die Bewegung für Besucher ab, die [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) wünschen.

## So wirkt ein Gradient Orb originell

### Generischer Orb

- Lila zu Blau, zentriert, auf Schwarz
- Rein weißer Kern, der ausbrennt
- Hinter der Überschrift platziert
- Perfekt glatt, Banding im Übergang

### Durchdachter Orb

- Eine Markenfarbe mit Farbtonverschiebung im Auslauf
- Ein getönter Kern, der leuchtend bleibt
- Versetzt, angeschnitten, Worte auf ruhigem Grund
- Feine Körnung über dem Übergang, damit er weich bleibt

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](https://gradiently.design/de/guide/grainy-gradients) 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.

## FAQ

### Wie erstelle ich einen Gradient Orb?

Nutz einen radialen Verlauf mit getöntem weißem Kern, einem gesättigten Farbband und einem dunklen Grund, zum Beispiel `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Welcher Hintergrund passt am besten hinter einen Gradient Orb?

Ein fast schwarzer Ton, der zur Farbe des Orbs hin getönt ist. Leuchten wirkt nur vor dunkler Umgebung wie Leuchten.

### Kann ich Text auf einen Gradient Orb setzen?

Besser nicht. Der Orb ist der hellste Teil des Bildes, also verliert Text darauf an Kontrast. Setz den Orb zur Seite und halte die Worte auf ruhigem Grund.

### Wie erstelle ich einen verschwommenen Orb in CSS?

Erstell ein rundes Element mit einem radialen Verlauf, der ins Transparente ausläuft, und wende dann `filter: blur()` an. Positionier es absolut hinter dem Inhalt.