Generador de formas blob en CSS
Crea figuras orgánicas con los 8 valores de border-radius y llévate el CSS
Ajusta con sliders los ocho valores de la sintaxis con barra de border-radius y ve en tiempo real cómo nacen formas orgánicas tipo gota de agua u hoja. Es una ayuda rápida para diseñadores y desarrolladores front-end que necesitan CSS para adornos de fondo, máscaras de fotos de perfil o tarjetas de interfaz. Todo el cálculo se hace en tu navegador y nada se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Empieza eligiendo un preajuste: orgánico, gota, hoja o huevo.
- Mueve los 8 sliders (4 horizontales y 4 verticales) para afinar la forma al detalle.
- Observa en la vista previa cómo cambia el blob en tiempo real.
- Copia con el botón el código CSS de border-radius resultante y pégalo en tu proyecto.
Preguntas frecuentes
- ¿El CSS generado funciona en todos los navegadores?
- La sintaxis con barra (/) de border-radius tiene un soporte muy amplio en los navegadores modernos. Si necesitas dar servicio a navegadores antiguos, conviene hacer una prueba aparte.
- ¿Qué significan los valores de los sliders?
- Los cuatro valores anteriores a la barra son el radio horizontal de cada esquina y los cuatro posteriores, el radio vertical. Combinándolos consigues curvas muy distintas.
- ¿Puedo aplicar la forma a una imagen?
- Sí. Si aplicas el valor de border-radius generado al CSS de una imagen o de un div, el elemento se recorta con la forma del blob.