¿Cómo dibujo una forma orgánica blob con puro CSS?
border-radius no son solo esquinas redondeadas. La sintaxis completa acepta ocho valores (cuatro para el eje horizontal, cuatro para el vertical), lo que te deja dibujar formas blob orgánicas usadas en landings modernas (hero sections, avatares, ilustraciones juguetonas).
Un `border-radius: 16px` plano te da un rectángulo con esquinas suaves. Pero `border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%` se convierte en una gota, hoja o guijarro. Cada una de las cuatro esquinas tiene su propio radio horizontal y radio vertical.
Aquí obtienes 8 sliders más un modo simétrico (4 sliders para rectángulos planos con esquinas distintas). Pulsa "Copiar" y pega el CSS.
Cómo usar
- Pulsa un preset blob de la galería o empieza desde el default. Cada slider (0-100%) cambia una esquina.
- Activa simétrico si 4 sliders bastan (un rectángulo con radios de esquina distintos). Apagado = 8 valores completos para formas orgánicas.
- Elige un color de relleno y color de canvas para ver la forma en contexto.
- Copia el CSS y pega en tu hoja de estilos. La forma escala con el elemento, ya que los valores van en %.
- Truco: añade un `background: url(...)` o gradiente y tienes un avatar orgánico o un blob de fondo de hero-section.
Cuándo ayuda
Las formas orgánicas son la tendencia en diseño web moderno (Stripe, Framer, la mayoría de landings fintech):
- Hero section con blobs de fondo. Tres blobs grandes coloreados con una sombra suave dan un feel premium sin imágenes.
- Avatares de usuario. En vez de círculos perfectos, un squircle ligeramente irregular (Apple HIG) se ve menos corporativo.
- Decoración de tarjeta de producto. Un blob en la esquina de la tarjeta como elemento gráfico.
- Siluetas de icono y pictograma personalizadas.
- Secciones de features en una landing. Un blob coloreado tras cada bullet = look juguetón.
- Animación de blob morph. Con `transition: border-radius 2s` obtienes una forma que se transforma lentamente, un efecto muy popular en portfolios modernos.
Para sombras bajo formas orgánicas mira generador box-shadow. Para formas angulares complejas (estrellas, flechas, bocadillos) usa el generador clip-path.