Los blobs suaves e irregulares son populares en las interfaces modernas para avatares, fondos de portada y acentos decorativos. No necesitas un editor SVG: bastan ocho valores de border-radius.
La idea
Cada esquina tiene un radio horizontal y uno vertical. Cuando son distintos y varían de una esquina a otra, el contorno se convierte en una forma redondeada irregular. Por ejemplo:
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%
Los porcentajes son ideales porque el blob escala con el elemento.
Flujo de trabajo
- Empieza con un elemento cuadrado o rectangular con un fondo sólido o un degradado.
- Mueve los controles del generador hasta que la forma se vea natural.
- Mantén los valores entre aproximadamente 30% y 70% para formas suaves. Los valores cercanos a 0% o 100% dan resultados más planos o más angulosos.
- Copia el CSS y pégalo en tu hoja de estilos.
Casos de uso
- Fotos de perfil recortadas en forma de blob con
overflow: hiddenuobject-fit: cover. - Formas decorativas de fondo detrás de los títulos.
- Botones o etiquetas con un aspecto amigable.
Animar un blob
La propiedad se puede animar, lo que crea un suave efecto de transformación. Define dos formas en una animación con keyframes y alterna entre ellas durante varios segundos.
@keyframes morph {
0% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
100% { border-radius: 40% 60% 35% 65% / 60% 40% 60% 40%; }
}
Respeta a quienes prefieren menos movimiento envolviendo la animación en una media query prefers-reduced-motion: no-preference.
Rendimiento y accesibilidad
Animar border-radius provoca repintados, así que limítalo a pocos elementos pequeños. Un blob es decoración, por lo que debes asegurarte de que el texto encima mantenga suficiente contraste con el relleno.
Preguntas frecuentes
¿Puedo usarlo en imágenes? Sí, aplícalo directamente al elemento img y añade object-fit: cover para un recorte limpio.
¿Es compatible en todas partes? Border-radius con la sintaxis de barra lleva muchos años soportado por todos los navegadores modernos.