# Organic / blob shapes

Also called: blob design, organic shapes UI, fluid shapes, amoeba shapes, morphing blobs, biomorphic web  
Era: 2018-2022 (Spotify, Google Material blobs, wellness brands)  
Page: https://designforai.dev/style/organic-blob-shapes

## Traits

- irregular rounded shapes (SVG paths or border-radius with 8 values) as backgrounds, masks and image frames
- soft, natural palettes or one vivid colour on cream
- shapes overlap, sit behind text, and frame photos instead of rectangles
- rounded sans typography, medium weights, comfortable sizes
- blobs morph slowly between shapes (border-radius animation or SVG path morph)
- no hard edges anywhere: pills, circles, blobs
- friendly, human, wellness or food tone

Palette: #fffaf3 cream, #2a2a2a text, #ff8a65 coral, #ffd166 sun, #06d6a0 mint, #118ab2 ocean, #ef476f raspberry

Type: Poppins, Outfit, Quicksand or Nunito; headings 600-700 at 40-64px, body 400 at 17px; DM Serif Display for a contrasting heading if needed

## Do

- generate blobs with an 8-value border-radius (e.g. 30% 70% 70% 30% / 30% 30% 70% 70%) and animate between two or three values over 8-12s
- use blobs as clip-path or mask on photos so images are organic too
- keep blobs to 2-3 per viewport and put them behind content with low z-index

## Don't

- do not use rectangles for images or cards; if it has a corner, it is off-style
- do not animate blobs faster than 6s; it looks like boiling
- do not use blobs and glass together; pick one material

Known for it: Spotify campaigns 2018-2020, Google Material blobs, Oatly (partial), Glossier (partial), 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

Build the site with organic blob shapes. Background #fffaf3, text #2a2a2a, accents coral #ff8a65, mint #06d6a0, sun #ffd166, ocean #118ab2. Font Outfit: headings 700 at 60/40/26px, body 400 at 17px line-height 1.6. Hero: headline on the left, on the right a photo clipped by a blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animated between three border-radius values over 10s ease-in-out infinite; two flat blobs in #ffd166 and #06d6a0 behind it at 60% size, offset, z-index below content, drifting 15px over 12s. Section backgrounds are large blobs in accent colours bleeding off the edge instead of rectangular bands. Cards: white, border-radius 40px / 48px, no border, no shadow; icons sit in small blob badges. Buttons pills, #ff8a65 fill, white text, 52px tall. Images always blob-masked or circular; no rectangle corners anywhere. Motion: morph and drift only; hover scales buttons 1.04 over 200ms.