Generador de Border Radius Creativo
Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
¿Qué significa la sintaxis de 8 valores de border-radius?
En la sintaxis border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, los valores antes de la barra son los radios horizontales (superior izquierda, superior derecha, inferior derecha, inferior izquierda) y los que siguen son los radios verticales. Usar valores distintos en cada dirección es lo que crea las formas blob orgánicas.
¿Cómo uso el CSS generado?
Copia la línea de border-radius y pégala en cualquier regla CSS del elemento que quieras dar forma, por ejemplo .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Funciona en CSS puro, Sass, valores arbitrarios de Tailwind y estilos en línea.
¿Dónde se usan las formas blob?
Las formas blob son populares en ilustraciones de portada, avatares, fotos de perfil, tarjetas de características, botones y fondos decorativos en el diseño moderno de web y apps.
¿Las esquinas redondeadas funcionan en todos los navegadores?
Sí. border-radius está soportado por todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y los navegadores móviles, sin necesidad de prefijos.
¿Puedo animar la forma blob?
Sí. border-radius es una propiedad animable, así que con una transición CSS puedes morfar suavemente entre formas, por ejemplo .blob { transition: border-radius .8s ease; }.
¿Cuál es la diferencia entre la sintaxis de 4 y de 8 valores?
La forma de 4 valores asigna el mismo radio horizontal y vertical a cada esquina, suficiente para pastillas o círculos. La de 8 valores separa los radios horizontales y verticales, lo que permite formas asimétricas y orgánicas.
¿Cómo creo un círculo perfecto?
Establece los ocho valores en 50% sobre un elemento cuadrado, o simplemente usa border-radius: 50%. También puedes partir de un predefinido cercano al círculo y ajustarlo.
¿Se suben mis datos a algún servidor?
No. El generador funciona por completo en tu navegador con CSS y JavaScript puros. Nada de lo que arrastres, escribas o copies se envía a ningún servidor.
¿Puedo usarlo en elementos no cuadrados?
Sí, pero los radios porcentuales son relativos a las dimensiones del elemento, así que un rectángulo producirá esquinas elípticas y un aspecto distinto al de la vista previa cuadrada. Usa los valores generados como punto de partida y ajusta.
Cómo usar Generador de Border Radius Creativo
El border-radius de ocho valores produce formas orgánicas tipo blob con esquinas elípticas que un simple rectángulo redondeado no puede igualar. Esculpe la forma con los controles y copia el CSS listo — todo se renderiza en vivo en tu navegador.
- Arrastra cualquiera de los ocho puntos situados en los bordes de la forma: los de los bordes superior e inferior ajustan los radios horizontales, y los de los laterales los verticales.
- Haz clic en uno de los seis cuadrados de formas predefinidas para partir de un blob ya diseñado y afina luego los valores en los campos numéricos de Radios horizontales y Radios verticales (uno por esquina, 0–100%).
- Pulsa Aleatorio para generar de un clic una forma orgánica nueva, o Restablecer para volver a la forma y los colores por defecto.
- Elige un Color de la forma y un Fondo para previsualizar el blob sobre tu paleta objetivo: ambos se actualizan al instante.
- Pulsa Copiar CSS para llevarte la declaración border-radius que se muestra en vivo en la barra inferior y pégala en cualquier elemento.
Aplica el código a un elemento cuadrado con overflow: hidden para el clásico efecto blob; los porcentajes mantienen la curva fluida en cualquier tamaño, y la barra del código separa los radios horizontales de los verticales.
Herramientas relacionadas
- Generador de Border Radius CSS Generador visual de border-radius CSS. Ajusta cada esquina de forma independiente con vista previa en tiempo real y copia el código CSS al instante.
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador de Box Shadow CSS Generador online gratuito de box-shadow CSS. Crea sombras hermosas visualmente con desplazamiento, desenfoque, extensión, color e inset ajustables. Vista previa en vivo y copia instantánea.
- Generador de Paleta de Colores Crea paletas de colores hermosas y armoniosas al instante con nuestro generador online gratuito. Soporta modos monocromático, análogo, complementario, triádico, split-complementario y tetradício. Ajusta colores con controles HSL, bloquea favoritos y exporta como CSS, Tailwind, JSON o SVG. 100% basado en navegador, tus datos nunca salen de tu dispositivo.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.
- Generador de Clip Path CSS Generador online gratuito de clip-path CSS. Diseña formas polygon, circle, ellipse e inset con puntos arrastrables, vista previa en vivo y copia del código CSS en un clic.