Blobs sind weiche organische Formen mit unregelmäßigen, glatten Kanten — der Designtrend hinter unzähligen Hero-Hintergründen, Avataren und Bereichstrennern seit 2020. Der klassische CSS-Trick nutzt einen 8-Werte-border-radius, um ein flaches Rechteck in eine organische Form zu biegen.
Klicke auf „Zufällig", um eine neue Form zu erzeugen, ziehe den Krümmungsregler für rundere oder exzentrischere Kanten und wähle eine Farbe. Kopiere den border-radius-Code direkt in dein CSS — keine Bilder, keine SVG-Dateien, vollständig responsiv.
Frequently Asked Questions
Q: Wie funktioniert der border-radius-Blob-Trick?
Wie funktioniert der border-radius-Blob-Trick? Die 8-Werte-Syntax border-radius: a b c d / e f g h setzt unterschiedliche horizontale und vertikale Radien pro Ecke. Asymmetrische Werte verformen das Rechteck zu sanften organischen Formen.
Q: Können Blobs animiert werden?
Können Blobs animiert werden? Ja. Animiert man border-radius zwischen zwei organischen Wertesätzen mit @keyframes oder einer Transition, verformt sich die Form sanft — der typische „Morphing-Blob"-Effekt.
Q: Sind Blobs 2026 noch im Trend?
Sind Blobs 2026 noch im Trend? Ja. Organische Formen haben sich vom Trend 2020 zum Standard des modernen Designs entwickelt — zu sehen bei Stripe, Vercel und unzähligen SaaS-Heroes. Sie passen perfekt zu Glassmorphism und Verläufen.
Q: SVG oder CSS für Blobs?
SVG oder CSS für Blobs? CSS-border-radius ist leichter und einfacher zu bearbeiten, perfekt für dekorative Hintergründe. SVG-Pfade bieten präzise Kontrolle für Logos und Illustrationen, auf Kosten der Komplexität.
Q: Wie nutze ich einen Blob als Hintergrund?
Wie nutze ich einen Blob als Hintergrund? Erstelle ein positioniertes div mit Blob-border-radius, setze einen niedrigen z-index, füge Verlaufsfüllung und optionalen Weichzeichner hinzu und platziere den Inhalt darüber. Langsam animieren für einen lebendigen Hintergrund.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.