# Organisch / Blob-Formen

Auch bekannt als: Blob-Design, organische Formen-UI, fließende Formen, Amöbenformen, morphende Blobs, biomorphes Web  
Ära: 2018-2022 (Spotify, Google-Material-Blobs, Wellness-Marken)  
Seite: https://designforai.dev/de/style/organic-blob-shapes

## Merkmale

- unregelmäßig runde Formen (SVG-Pfade oder border-radius mit 8 Werten) als Hintergründe, Masken und Bildrahmen
- weiche, natürliche Paletten oder eine kräftige Farbe auf Creme
- Formen überlappen, sitzen hinter Text und rahmen Fotos statt Rechtecke
- runde Sans-Typografie, mittlere Schnitte, angenehme Größen
- Blobs morphen langsam zwischen Formen (border-radius-Animation oder SVG-Pfad-Morph)
- nirgends harte Kanten: Pillen, Kreise, Blobs
- freundlicher, menschlicher Wellness- oder Food-Ton

Palette: #fffaf3 Creme, #2a2a2a Text, #ff8a65 Koralle, #ffd166 Sonne, #06d6a0 Mint, #118ab2 Ozean, #ef476f Himbeere

Schrift: Poppins, Outfit, Quicksand oder Nunito; Überschriften 600-700 bei 40-64px, Fließtext 400 bei 17px; DM Serif Display für eine kontrastierende Überschrift, falls nötig

## Do

- erzeuge Blobs mit einem 8-Werte-border-radius (z. B. 30% 70% 70% 30% / 30% 30% 70% 70%) und animiere über 8-12s zwischen zwei oder drei Werten
- nutze Blobs als clip-path oder mask auf Fotos, damit auch Bilder organisch sind
- halte Blobs bei 2-3 pro Viewport und lege sie mit niedrigem z-index hinter den Inhalt

## Don't

- nutze keine Rechtecke für Bilder oder Karten; hat es eine Ecke, passt es nicht zum Stil
- animiere Blobs nicht schneller als 6s; es sieht aus wie Kochen
- nutze Blobs und Glas nicht zusammen; wähle ein Material

Bekannt dafür: Spotify-Kampagnen 2018-2020, Google-Material-Blobs, Oatly (teilweise), Glossier (teilweise), Headspace

## CSS-Seed

```css
:root{--bg:#fffaf3; --fg:#2a2a2a; --accent:#ff8a65; --accent2:#06d6a0; --accent3:#ffd166; --radius:30% 70% 70% 30% / 30% 30% 70% 70%; --shadow:none; --font:'Outfit',sans-serif}
```

## Prompt

Baue die Seite mit organischen Blob-Formen. Hintergrund #fffaf3, Text #2a2a2a, Akzente Koralle #ff8a65, Mint #06d6a0, Sonne #ffd166, Ozean #118ab2. Schrift Outfit: Überschriften 700 bei 60/40/26px, Fließtext 400 bei 17px line-height 1.6. Hero: Headline links, rechts ein Foto, das von einem Blob beschnitten wird (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%), animiert zwischen drei border-radius-Werten über 10s ease-in-out infinite; zwei flache Blobs in #ffd166 und #06d6a0 dahinter bei 60 % Größe, versetzt, z-index unter dem Inhalt, 15px über 12s driftend. Abschnittshintergründe sind große Blobs in Akzentfarben, die über den Rand laufen, statt rechteckiger Bänder. Karten: weiß, border-radius 40px / 48px, kein Rand, kein Schatten; Icons sitzen in kleinen Blob-Badges. Buttons Pillen, #ff8a65 Füllung, weißer Text, 52px hoch. Bilder immer blob-maskiert oder rund; nirgends Rechteckecken. Motion: nur Morph und Drift; Hover skaliert Buttons über 200ms auf 1.04.