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

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.

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.

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

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

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.

• 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

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 erklärt das Paar.

Formen mit Farbverlauf im Layout einsetzen

1. 1

   Wähle eine Lichtquelle

   Schreib sie auf: oben links, warm. Jede Form, jeder Schatten und jedes Glanzlicht folgt ihr.

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

   Halte eine ruhige Fläche für Wörter frei

   Formen sind unruhig. Setze sie um die Headline herum, nie dahinter.

5. 5

   Füge Körnung hinzu

   Eine feine Rauschebene lässt glatte digitale Schattierung gedruckt wirken und kaschiert Banding. Siehe körnige Farbverläufe.

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.