Wie zeichne ich eine organische Blob-Form mit purem CSS?
border-radius ist nicht nur runde Ecken. Die volle Syntax akzeptiert acht Werte (vier für die horizontale Achse, vier für die vertikale), womit du organische Blob-Formen zeichnen kannst, die in modernen Landingpages üblich sind (Hero-Sektionen, Avatare, verspielte Illustrationen).
Reines `border-radius: 16px` liefert ein Rechteck mit weichen Ecken. Aber `border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%` wird zu einem Tropfen, Blatt oder Kiesel. Jede der vier Ecken hat ihren eigenen horizontalen Radius und vertikalen Radius.
Hier bekommst du 8 Schieberegler plus einen symmetrischen Modus (4 Schieberegler für einfache Rechtecke mit verschiedenen Ecken). Klick "Kopieren" und füg das CSS ein.
So nutzt du es
- Klick ein Blob-Preset aus der Galerie oder starte mit dem Default. Jeder Regler (0-100%) ändert eine einzelne Ecke.
- Schalte symmetrisch ein, wenn 4 Schieberegler reichen (Rechteck mit unterschiedlichen Eckenradien). Aus = volle 8 Werte für organische Formen.
- Wähl eine Füllfarbe und eine Canvas-Farbe, um die Form im Kontext zu sehen.
- Kopier das CSS und füg es in dein Stylesheet ein. Die Form skaliert mit dem Element, weil die Werte in % sind.
- Trick: füg ein `background: url(...)` oder einen Verlauf hinzu, und du hast einen organischen Avatar oder ein Hero-Section-Hintergrund-Blob.
Wann das hilft
Organische Formen sind der Trend im modernen Webdesign (Stripe, Framer, die meisten Fintech-Landingpages):
- Hero-Sektion mit Hintergrund-Blobs. Drei große bunte Blobs mit einem weichen Schatten geben Premium-Feeling ohne Bilder.
- Nutzer-Avatare. Statt perfekter Kreise wirkt ein leicht unregelmäßiger Squircle (Apple HIG) weniger Corporate.
- Produktkarten-Dekoration. Ein Blob in der Karten-Ecke als grafisches Element.
- Eigene Icon- und Piktogramm-Silhouetten.
- Feature-Sektionen auf einer Landingpage. Ein farbiger Blob hinter jedem Bullet = verspielter Look.
- Blob-Morph-Animation. Mit `transition: border-radius 2s` bekommst du eine langsam morphende Form, ein sehr beliebter Effekt in modernen Portfolios.
Für Schatten unter organischen Formen sieh den Box-Shadow-Generator. Für komplexe eckige Formen (Sterne, Pfeile, Sprechblasen) nutze den Clip-Path-Generator.