# Formas orgánicas / blobs

También llamado: diseño de blobs, UI de formas orgánicas, formas fluidas, formas de ameba, blobs que se transforman, web biomórfica  
Época: 2018-2022 (Spotify, blobs de Google Material, marcas de bienestar)  
Página: https://designforai.dev/es/style/organic-blob-shapes

## Rasgos

- formas redondeadas irregulares (paths SVG o border-radius con 8 valores) como fondos, máscaras y marcos de imagen
- paletas suaves y naturales o un único color vivo sobre crema
- las formas se solapan, se colocan detrás del texto y enmarcan fotos en lugar de rectángulos
- tipografía sans redondeada, pesos medios, tamaños cómodos
- los blobs se transforman despacio entre formas (animación de border-radius o morph de path SVG)
- sin bordes duros en ningún sitio: píldoras, círculos, blobs
- tono amigable, humano, de bienestar o comida

Paleta: #fffaf3 crema, #2a2a2a texto, #ff8a65 coral, #ffd166 sol, #06d6a0 menta, #118ab2 océano, #ef476f frambuesa

Tipografía: Poppins, Outfit, Quicksand o Nunito; títulos 600-700 a 40-64px, cuerpo 400 a 17px; DM Serif Display para un título de contraste si hace falta

## Haz

- genera los blobs con un border-radius de 8 valores (p. ej. 30% 70% 70% 30% / 30% 30% 70% 70%) y anímalos entre dos o tres valores durante 8-12s
- usa los blobs como clip-path o mask en las fotos para que las imágenes también sean orgánicas
- limita los blobs a 2-3 por viewport y ponlos detrás del contenido con un z-index bajo

## Evita

- no uses rectángulos para imágenes ni tarjetas; si tiene una esquina, se sale del estilo
- no animes los blobs más rápido de 6s; parece que hierven
- no uses blobs y cristal juntos; elige un material

Conocido por: Campañas de Spotify 2018-2020, blobs de Google Material, Oatly (parcial), Glossier (parcial), Headspace

## Semilla CSS

```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

Construye el sitio con formas orgánicas de blob. Fondo #fffaf3, texto #2a2a2a, acentos coral #ff8a65, menta #06d6a0, sol #ffd166, océano #118ab2. Fuente Outfit: títulos 700 a 60/40/26px, cuerpo 400 a 17px con line-height 1.6. Hero: titular a la izquierda, a la derecha una foto recortada por un blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animado entre tres valores de border-radius durante 10s ease-in-out infinite; dos blobs planos en #ffd166 y #06d6a0 detrás al 60% del tamaño, desplazados, z-index por debajo del contenido, a la deriva 15px durante 12s. Los fondos de sección son grandes blobs en colores de acento que se salen por el borde en lugar de bandas rectangulares. Tarjetas: blancas, border-radius 40px / 48px, sin borde, sin sombra; los iconos van en pequeñas insignias blob. Botones píldora, relleno #ff8a65, texto blanco, 52px de alto. Las imágenes siempre con máscara blob o circulares; sin esquinas rectangulares en ningún sitio. Movimiento: solo morph y deriva; el hover escala los botones a 1.04 durante 200ms.