Generador de Border-Radius CSS (formas orgánicas)
Respuesta rápida: border-radius admite hasta 8 valores separados por una barra. Los 4 primeros son el radio horizontal de cada esquina y los 4 siguientes, el vertical. Ejemplo: border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
Cómo usarla
- Mueve los controles de las 8 esquinas: cuatro horizontales y cuatro verticales.
- Mira la forma en la vista previa: cambia en tiempo real.
- Si quieres inspiración, pulsa Aleatorio para generar una combinación.
- Copia el código y pégalo en tu hoja de estilos CSS.
Datos clave
- Cada valor va en porcentaje (%). Con 50% en las 8 esquinas, un elemento cuadrado se convierte en un círculo.
- El orden de las esquinas es arriba izquierda, arriba derecha, abajo derecha y abajo izquierda.
- Si una esquina tiene radio horizontal y vertical distintos, esa esquina se alarga o se aplasta en vez de ser redonda.
- El código se genera en tu navegador: no se envía nada a ningún servidor.
Casos de uso
- Fondo decorativo detrás de una foto de perfil o de un botón.
- Formas suaves en una sección de una landing page.
- Máscara de imagen: con overflow: hidden en el contenedor, la foto se recorta con la forma orgánica.
Sobre esta herramienta
Crea formas orgánicas irregulares (conocidas como 'blobs'), muy populares en el diseño web moderno como fondo decorativo detrás de una foto de perfil o una sección de landing page, ajustando de forma independiente el radio de cada una de las 8 esquinas de la propiedad CSS border-radius (que en realidad acepta hasta 8 valores distintos, uno por esquina en cada eje, algo que pocos diseñadores conocen o usan a mano). Ajusta cada valor con controles deslizantes y mira la forma resultante en tiempo real, o genera una forma aleatoria con un clic para inspirarte. Cuando el resultado te convence, copia el valor exacto de border-radius con un clic y pégalo en tu CSS. Todo el diseño ocurre en tu navegador en tiempo real, sin necesidad de un editor de diseño gráfico ni de calcular manualmente 8 porcentajes distintos.
Preguntas frecuentes
¿Cómo se crea un blob con border-radius?
La propiedad border-radius admite 8 valores (4 horizontales y 4 verticales, separados por una barra). Al darle a cada esquina un radio distinto, un cuadrado se convierte en una forma orgánica irregular.
¿Qué controles tiene?
Ocho deslizadores, uno por cada valor, un botón de generación aleatoria y la vista previa en vivo. El código CSS se actualiza al moverlos.
¿En qué unidad sale el código?
En porcentajes, como border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;. Los porcentajes hacen que la forma se adapte al tamaño del elemento.
¿Funciona con elementos que no son cuadrados?
Sí, pero la forma cambia: al usar porcentajes, el mismo código da un óvalo irregular en un elemento rectangular. Para un blob regular, usa un elemento cuadrado con el mismo ancho y alto.
¿Es compatible con todos los navegadores?
Sí. La sintaxis de 8 valores con barra la admiten todos los navegadores actuales, incluido el móvil.
Cómo leer el valor de border-radius
La propiedad usa dos grupos de valores separados por una barra. Los dos grupos siguen el mismo orden de esquinas:
| Valores | Qué controlan | Orden de las esquinas |
|---|---|---|
| Primeros 4 (antes de la barra) | Radio horizontal | Arriba izquierda, arriba derecha, abajo derecha, abajo izquierda |
| Últimos 4 (después de la barra) | Radio vertical | Lo mismo |
Si pones un solo valor, como border-radius: 20px, todas las esquinas usan ese radio. Si pones cuatro sin barra, el orden de las esquinas es el mismo.
Herramientas relacionadas
Generador de Sombras CSS (box-shadow)
Crea sombras CSS personalizadas y copia el código box-shadow
LocalGenerador de Botones CSS
Diseña botones CSS personalizados y copia el código HTML/CSS
LocalGenerador de Tarjetas CSS (Cards)
Diseña tarjetas CSS personalizadas y copia el código HTML/CSS
LocalGenerador de Spinners CSS (indicadores de carga)
Crea indicadores de carga (spinners) animados en CSS puro
LocalGenerador de Patrones de Fondo CSS
Crea patrones de fondo (rayas, puntos, cuadrícula) en CSS puro
LocalGenerador de Textura de Ruido (Noise)
Crea una textura de ruido/grano sutil para fondos de diseño