BlogWebentwicklung
Organische Blob-Form mit CSS-Animation umsetzen
Die weichen, unregelmäßig geformten Flächen hinter Hero-Sections und App-Illustrationen wirken oft wie ein SVG-Import aus Figma oder eine kleine JavaScript-Bibliothek. In den meisten Fällen ist es ein einziges div und eine CSS-Eigenschaft, die jeder aus dem Alltag kennt: border-radius.
Acht Werte statt einer Rundung
border-radius wird meist mit einem Wert benutzt, der alle vier Ecken gleich rundet. Die Kurzschreibweise erlaubt aber bis zu acht Werte: vier vor einem Schrägstrich für die horizontalen Radien der Ecken, vier danach für die vertikalen. Die Reihenfolge folgt derselben Konvention wie bei margin oder padding: oben links, oben rechts, unten rechts, unten links.
.blob {
width: 280px;
aspect-ratio: 1;
background: linear-gradient(135deg, #22d3ee, #6366f1);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
Setzt man für eine Ecke einen anderen horizontalen als vertikalen Radius, wird aus dieser Ecke ein Ellipsenausschnitt statt eines Kreisausschnitts. Vier unterschiedlich verzerrte Ecken zusammen ergeben eine Fläche, die keiner geometrischen Grundform mehr ähnelt, obschon sie aus nichts als einer einzelnen Eigenschaft entsteht.
Bewegung über @keyframes
Für eine stehende Illustration reicht dieser eine Wertesatz. Für Bewegung braucht es mehrere Sätze und eine Keyframe-Animation, die zwischen ihnen wechselt. Wichtig ist, an jedem Haltepunkt alle acht Werte auszuschreiben. Fehlen einzelne, ergänzt der Browser sie nach eigenen Regeln, und der Übergang wirkt sprunghaft statt fließend.
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation: blob-morph 14s ease-in-out infinite;
}
@keyframes blob-morph {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
33% {
border-radius: 30% 70% 70% 30% / 50% 60% 30% 60%;
}
66% {
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
}
}
Eine zusätzliche, langsame rotate()-Transformation über transform gibt der Fläche eine zweite Bewegungsachse. In Kombination mit einem Verlaufshintergrund wandert der Lichteindruck mit der Drehung, was die Illusion von Tiefe verstärkt, ohne dass tatsächlich Licht berechnet wird.
Bewegung, die sich abschalten lässt
Eine Animation, die 14 Sekunden lang endlos läuft, ist für einen Teil der Nutzenden eine echte Belastung. Menschen mit vestibulären Störungen reagieren auf permanente Bewegung im Hintergrund mit Schwindel oder Unwohlsein. prefers-reduced-motion fängt genau diesen Fall ab.
Die Fläche bleibt dann im ersten Wertesatz stehen, organisch, nur eben unbewegt. Das ist keine Einschränkung. Es ist die Voraussetzung, den Effekt verantwortungsvoll einzusetzen.
Wo der Trick trägt
Der Effekt trägt am besten im Hintergrund, nie als Träger der Hauptbotschaft selbst.
- Hintergrundformen in Hero-Sections, die eine Fläche ohne harte Kanten brauchen.
- Rahmen um Portraitbilder oder Avatare, die weicher wirken sollen als ein klassischer Kreis.
- Platzhalterflächen in Ladezuständen, wo die Bewegung selbst die Botschaft „hier passiert etwas" trägt.
- Anfrage- oder Kontakt-Buttons als Overlay, die sich bewusst von rechteckigen Buttons abheben sollen.
Ein Hinweis zur Performance
border-radius ist eine Paint-Eigenschaft. Jede Änderung erzwingt für das Element ein Repaint, anders als reine transform- oder opacity-Animationen, die der Browser auf der Compositor-Ebene abwickelt. Für eine einzelne Hintergrundform in überschaubarer Größe fällt das kaum ins Gewicht. Deckt die Fläche einen großen Teil des Viewports ab oder laufen mehrere Blobs gleichzeitig, lohnt sich vorher ein Blick in die DevTools-Performance-Ansicht.
Zusammenfassung
| Technik | Zweck |
|---|---|
| border-radius mit 8 Werten (4 vor, 4 nach dem Schrägstrich) | organische, unregelmäßige Fläche statt gleichmäßiger Rundung |
| @keyframes mit vollständig ausgeschriebenen Wertesätzen | fließender Übergang zwischen mehreren Formen |
| rotate() über transform, kombiniert mit Verlauf | zweite Bewegungsachse, Eindruck von wanderndem Licht |
| prefers-reduced-motion | Animation für Nutzende mit vestibulären Störungen abschalten |
Glossar
CSS-Eigenschaft, die bis zu acht Werte annehmen kann: vier horizontale Eckradien vor einem Schrägstrich, vier vertikale danach. Ohne Schrägstrich gelten alle Werte für beide Achsen gleich.
CSS-Regel, die mehrere Zwischenzustände einer Animation an benannten Haltepunkten in Prozent definiert. Eine animation-Eigenschaft verweist per Namen darauf.
Media Feature, das die Systemeinstellung „Bewegungseffekte reduzieren" abfragt. Menschen mit vestibulären Störungen aktivieren sie, um durch Bewegung ausgelöste Beschwerden zu vermeiden.
Der Teil der Browser-Rendering-Pipeline, der transform- und opacity-Änderungen ohne erneutes Layout oder Paint verarbeitet, meist auf der GPU. border-radius-Änderungen laufen nicht darüber.
