Generador de formas blob en CSS
Crea formas orgánicas tipo blob con 8 valores de border-radius
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta te permite mover ocho controles deslizantes para dar forma a un blob con border-radius y ver la curva orgánica actualizarse en vivo en la vista previa. Es útil para diseñadores y desarrolladores frontend que necesitan CSS rápido para fondos decorativos, máscaras de avatar o tarjetas UI. Todo se procesa en tu navegador, sin enviar nada a un servidor.
Cómo usar
- Elige un preajuste inicial: Orgánico, Gota, Hoja o Huevo.
- Ajusta los ocho controles deslizantes horizontales y verticales para refinar la forma.
- Observa cómo cambia el blob en tiempo real en la vista previa.
- Copia 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 buen soporte en navegadores modernos. Si necesitas compatibilidad con navegadores antiguos, pruébalo antes.
- ¿Qué controlan los valores de los deslizadores?
- Los cuatro valores antes de la barra fijan el radio horizontal de cada esquina, y los cuatro de después el radio vertical, permitiendo combinar curvas variadas.
- ¿Puedo aplicar esta forma a una imagen?
- Sí, aplica el valor de border-radius generado al CSS de una imagen o un div para recortarlo con la forma de blob.