# Formen mit Farbverlauf: Blobs, Orbs und Kugeln, die echt wirken

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

Ein Blob mit Farbverlauf ist schnell gemacht. Ein Blob, der Gewicht zu haben scheint und im Licht steht, ist etwas anderes. Den Unterschied machen fünf kleine Entscheidungen darüber, woher das Licht kommt.

## The short version

- Formen mit Farbverlauf wirken dreidimensional, wenn jede Form im Design von derselben gedachten Lichtquelle schattiert wird.
- Eine überzeugende Kugel hat fünf Zonen: ein Glanzlicht, eine beleuchtete Seite, einen Kernschatten, ein Band aus Reflexlicht nahe der Kante und einen Schlagschatten darunter.
- In CSS ist eine Kugel ein rundes Element mit einem radialen Verlauf, dessen Mittelpunkt zum Licht hin verschoben ist, zum Beispiel `circle at 30% 30%`.
- Blobs und organische Formen entstehen aus ungleichen `border-radius`-Werten und werden mit demselben radialen Verlauf schattiert wie eine Kugel.
- Schatten sollten eine dunklere, kühlere Version der Eigenfarbe der Form sein, nicht Grau oder Schwarz.

**Formen mit Farbverlauf** sind Blobs, Orbs, Kugeln und Pillen, gefüllt mit einem Verlauf, der sie beleuchtet und voluminös wirken lässt. Echt wirken sie, wenn die Schattierung einer Lichtquelle folgt: ein helles Glanzlicht auf der dem Licht zugewandten Seite, ein dunklerer Kernschatten auf der abgewandten, ein schwacher Rand aus Reflexlicht ganz an der Kante und ein weicher Schatten am Boden. Lässt du eines davon weg, wirkt die Form wie ein flacher Sticker mit Verlauf. Stimmt alles, genügen zwei Farben, um einen festen Körper anzudeuten.

## Wie Licht auf eine runde Form fällt

Maler beschreiben das seit Jahrhunderten, und es gilt für jede runde Form, die du zeichnest. Wähle eine Lichtrichtung, bevor du eine Farbe wählst, und schattiere dann jede Zone der Reihe nach. Oben links ist die Konvention, weil Betrachter es so erwarten, aber jede Richtung funktioniert, solange du konsequent bleibst.

| Zone | Wo sie sitzt | Farbe |
| --- | --- | --- |
| Glanzlicht | Der Punkt, der dem Licht am nächsten ist | Fast Weiß, getönt mit der Farbe des Lichts |
| Lichtseite | Die dem Licht zugewandte Hälfte | Die echte Farbe der Form, am hellsten |
| Kernschatten | Wo sich die Oberfläche abwendet | Das dunkelste Band, etwas kühler |
| Reflexlicht | Ein schmaler Rand an der Schattenkante | Etwas heller als der Kernschatten |
| Schlagschatten | Auf der Fläche darunter | Weich, dunkel, am dunkelsten an der Berührung |

Die fünf Zonen einer beleuchteten Kugel. Der Reflexrand wird am häufigsten vergessen, und gerade er verkauft die Rundung.

## Schattierungsrezepte zum Kopieren

Diese Farbfelder sind Lichtstudien: die Schattierung, die du in einen Kreis, einen Zylinder oder einen Kegel legen würdest. Alle sind von oben links beleuchtet. Wende sie auf eine Form mit abgerundeten Ecken an, und sie werden zu festen Körpern.

- Kugelschattierung, Violett: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Kugelschattierung, Bernstein: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Zylinderschattierung, Petrol: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Kegelschattierung, Indigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Achte auf das leichte Aufhellen am Ende jeder Kugel und jedes Zylinders: Das ist das Reflexlicht an der Schattenkante.

Die Kugelrezepte enden auf einer Farbe, die etwas heller ist als die davor. Dieser letzte Stopp ist der Reflexrand, knapp innerhalb der Kreiskante gesetzt, damit er den Zuschnitt übersteht. Ohne ihn wird die Kante der Form tot, und sie wirkt wie ein Loch statt wie eine Kugel. Der Leitfaden zum [radialen Farbverlauf](https://gradiently.design/de/guide/radial-gradient) erklärt, wie Mittelpunkt und Größe den Abfall verändern.

## So baust du eine Kugel mit Farbverlauf in CSS

Mach das Element mit `border-radius: 50%` zum Kreis und verschiebe den Mittelpunkt des Verlaufs zum Licht hin. Der Kreis schneidet den Verlauf zu, sodass das Glanzlicht außermittig in einer perfekt runden Form sitzt. Eine weichgezeichnete, gestauchte Ellipse darunter ergibt den Schlagschatten.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

Eine violette Kugel mit weichem Schlagschatten und ein bernsteinfarbener Blob aus acht ungleichen border-radius-Werten.

> **Blobs, die atmen** Animiere die acht `border-radius`-Werte über 8 bis 12 Sekunden mit Ease-in-out zwischen zwei Sätzen. Die Form wabert langsam, während ihre Beleuchtung bleibt, und das hält sie glaubwürdig. Respektiere die Einstellung für [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion).

## Blobs, Pillen und organische Formen

Blobs wirken freundlich und weich, deshalb sind sie bei Wellness-, Food-, Kinder- und Kreativmarken so beliebt. Sie folgen denselben Lichtregeln wie eine Kugel, aber ihre Wölbungen fangen an mehr als einer Stelle Glanzlichter ein. Behalte ein Hauptglanzlicht und lass die anderen schwach. Mehr zum Stil selbst findest du unter [organische Formen im Design](https://gradiently.design/de/guide/organic-shapes-design).

- **Pille:** ein abgerundetes Rechteck, schattiert wie ein Zylinder, das Licht läuft der Länge nach.
- **Kiesel:** eine gestauchte Kugel, Glanzlicht breit und kontrastarm, wie matter Stein.
- **Tropfen:** eine Kugel mit hellem, scharfem Glanzlicht und starkem Reflexrand, wirkt glänzend.
- **Wolken-Blob:** überlappende Kreise mit einem gemeinsamen Glanzlicht, sodass sie als eine Form wirken.

## Warum Formen mit Farbverlauf flach wirken und was hilft

### Wirkt flach

- Glanzlicht genau mittig, wie vom Betrachter beleuchtet
- Jede Form von einer anderen Seite beleuchtet
- Graue oder schwarze Schatten
- Harte Kante zwischen Hell und Dunkel
- Kein Schlagschatten, die Formen schweben

### Wirkt massiv

- Glanzlicht zu einer Lichtquelle hin verschoben
- Alle Formen teilen dasselbe Licht
- Schatten in einem tieferen, kühleren Ton der Farbe
- Ein langer, allmählicher Übergang in den Kernschatten
- Ein weicher Schatten verankert jede Form auf einer Fläche

Die Farbtemperatur leistet viel. Warmes Licht ergibt kühle Schatten, kühles Licht warme. Eine violette Kugel unter einem leicht rosa Glanzlicht mit blauviolettem Kernschatten wirkt viel echter als eine, die einfach von Hellviolett nach Dunkelviolett geht. [Warme und kalte Farben](https://gradiently.design/de/guide/warm-and-cool-colors) erklärt das Paar.

## Formen mit Farbverlauf im Layout einsetzen

1. **Wähle eine Lichtquelle** Schreib sie auf: oben links, warm. Jede Form, jeder Schatten und jedes Glanzlicht folgt ihr.
2. **Nutze drei Größen** Eine große, eine mittlere und eine kleine Form wirken wie Tiefe. Fünf gleiche Blobs wirken wie Konfetti.
3. **Lass Formen aus dem Bild laufen** Wenn die größte Form am Rand angeschnitten ist, wirkt die Fläche größer als ihr Rahmen.
4. **Halte eine ruhige Fläche für Wörter frei** Formen sind unruhig. Setze sie um die Headline herum, nie dahinter.
5. **Füge Körnung hinzu** Eine feine Rauschebene lässt glatte digitale Schattierung gedruckt wirken und kaschiert Banding. Siehe [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients).

Ein Produktpost im Hochformat, der neue Eissorten ankündigt, mit weichen runden Verlaufsformen um die Headline

Ein Produktpost in 1080×1350. Runde, beleuchtete Formen um die Wörter, die Headline auf ruhigem Grund.

Wenn du Formen nicht von Hand schattieren willst: Die Marks von Gradiently sind lebendige Hintergründe aus geschichteten Materialien, Licht und Körnung, und sie rendern in jeder Größe, in der du gestaltest, sauber. Für eine einzelne leuchtende Kugel als Hero-Bild siehe [Gradient Orbs](https://gradiently.design/de/guide/gradient-orb).

## FAQ

### Wie lasse ich eine Form mit Farbverlauf 3D wirken?

Schattiere sie von einer Lichtquelle aus: ein Glanzlicht auf der Lichtseite, ein dunklerer Kernschatten auf der abgewandten Seite, ein etwas hellerer Rand an der Schattenkante und ein weicher Schlagschatten darunter.

### Wie macht man eine Kugel mit einem CSS-Farbverlauf?

Gib einem Element `border-radius: 50%` und einen `radial-gradient(circle at 30% 30%, ...)`, der von fast Weiß über die Hauptfarbe zu einem dunklen Ton läuft. Verschiebst du den Mittelpunkt zum Licht, sitzt das Glanzlicht außermittig.

### Wie erstelle ich eine Blob-Form in CSS?

Nutze acht ungleiche `border-radius`-Werte, etwa `62% 38% 46% 54% / 55% 42% 58% 45%`, und fülle die Form mit einem radialen Verlauf.

### Welche Farbe sollte der Schatten einer Form mit Farbverlauf haben?

Eine dunklere, etwas kühlere Version der Eigenfarbe der Form. Graue oder schwarze Schatten lassen farbige Formen schmutzig wirken.