Generador de Border Radius

Crea formas orgánicas y fluidas (blobs) ajustando 8 valores de radio. Genera y copia el código CSS al instante.

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Radio Horizontal

Arriba Izquierda30%
Arriba Derecha70%
Abajo Derecha70%
Abajo Izquierda30%

Radio Vertical

Arriba Izquierda30%
Arriba Derecha30%
Abajo Derecha70%
Abajo Izquierda70%

Generador de Border Radius | Crea Formas Orgánicas para tu Web

Esta herramienta te permite transformar los clásicos rectángulos rígidos en formas suaves, fluidas y "vivas" (conocidas como blobs) mediante el ajuste preciso de los 8 valores de la propiedad border-radius de CSS.

💡 Sobre esta herramienta

¿Sientes que los bordes redondeados de siempre hacen que tu diseño se vea algo monótono? Con este generador puedes aprovechar todo el potencial de CSS para crear figuras asimétricas que aportan un toque orgánico y humano a cualquier interfaz.

  • Diseño UI con personalidad: Ideal para crear fondos dinámicos, botones creativos o marcos de fotos con un estilo moderno.
  • Rendimiento optimizado: Genera decoraciones visualmente complejas usando solo código, sin necesidad de cargar archivos de imagen o SVG externos.
  • Creatividad sin fricción: Experimenta con la asimetría para alejarte de lo puramente geométrico y lograr un acabado más artesanal.

📘 Consejos de uso

  • Control total de los 8 valores: Ajusta de forma independiente el radio horizontal y vertical de cada una de las cuatro esquinas.
  • Inspiración instantánea: Si no sabes por dónde empezar, pulsa en "Generar forma aleatoria" y descubre combinaciones únicas al instante.
  • Copiar y listo: Hemos optimizado el código CSS para que solo tengas que hacer un clic y pegarlo directamente en tu hoja de estilos.
  • Prueba con degradados: Estas formas orgánicas lucen espectaculares cuando se combinan con degradados (gradients) de colores vibrantes.

🧐 Preguntas frecuentes

¿Para qué sirve la barra "/" en el código generado? En CSS, la barra inclina separa los valores del radio horizontal de los del radio vertical. Esta es la clave para que las esquinas dejen de ser simples arcos de círculo y pasen a ser elípticas, creando ese efecto de "gota" o "mancha".

¿Es compatible con todos los navegadores? ¡Totalmente! Esta sintaxis es un estándar de CSS3 y funciona perfectamente en todos los navegadores modernos (Chrome, Firefox, Safari, Edge y sus versiones móviles).

¿Por qué usar CSS en lugar de un archivo SVG? Para formas decorativas sencillas, el CSS es mucho más eficiente. Es más fácil de mantener, no añade peticiones de red adicionales y te permite crear animaciones fluidas utilizando simplemente transiciones (transition) de CSS.

📚 Curiosidades

El uso de los 8 valores de border-radius se convirtió en una tendencia clave dentro del diseño web "orgánico" y "líquido". Al trabajar con código puro en lugar de imágenes fijas, garantizas que tus elementos se vean perfectamente nítidos en cualquier tipo de pantalla, desde monitores 4K hasta pantallas de alta densidad (Retina). Es el equilibrio perfecto entre estética vanguardista y rendimiento técnico.