Bordes y formas
border-radius, blobs y clip-path
Editor
Arrastre los ocho controles a lo largo de los bordes o escriba los valores. Cada esquina tiene un radio horizontal y uno vertical.
Modelos
Morphing
Código
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Acerca de la herramienta
Este editor genera dos tipos de formas CSS. La pestaña border-radius ajusta los ocho radios de una caja, uno horizontal y otro vertical por esquina, para conseguir esquinas redondeadas, una gota, una hoja o un blob orgánico. Arrastras ocho controles a lo largo de los bordes, escribes los valores en porcentaje o pegas un valor existente. Una opción anima la caja entre una forma de inicio y una forma final.
La pestaña clip-path recorta un elemento con un polígono, un círculo, una elipse o un rectángulo inset con esquinas redondeadas. El polígono admite de 3 a 40 vértices, que se mueven con el ratón o el teclado, y once modelos incluyen una estrella, una flecha o una burbuja de mensaje. La vista previa usa un color o una imagen que elijas, y el CSS se copia con un clic.
Cómo usarla
- Elige la pestaña «border-radius» o «clip-path».
- Para un border-radius, parte de uno de los «Modelos» o pulsa «Blob aleatorio» y ajusta los controles o los «Radios horizontales» y «Radios verticales».
- Para un clip-path, elige el «Tipo de forma» y mueve los «Vértices» o ajusta los deslizadores.
- Marca «Animar entre dos formas» si quieres movimiento y ajusta la «Duración de un ciclo».
- Pulsa «Copiar el CSS» y pega el código en tu hoja de estilos.
Preguntas frecuentes
¿Qué significa la sintaxis de border-radius con una barra?
Los cuatro valores antes de la barra son los radios horizontales de las esquinas, en el orden arriba izquierda, arriba derecha, abajo derecha, abajo izquierda; los cuatro siguientes son los radios verticales. Con valores distintos se obtienen esquinas elípticas, la base de los blobs.
¿Qué código genera la animación entre dos formas?
Un bloque @keyframes morph que pasa de la forma de inicio a la final y vuelve, una regla animation en bucle infinito con la duración elegida entre 1 y 30 segundos, y una media query prefers-reduced-motion que desactiva la animación para quienes limitan el movimiento.
¿Cómo añado o quito un vértice del polígono?
Haz clic en un lado del polígono para añadir un vértice en ese punto, o usa «Añadir un vértice». Con el teclado, Tab selecciona un vértice, las flechas lo mueven (Mayús para ir más rápido) y Supr lo quita. Un polígono conserva siempre al menos 3 vértices.
¿Se envía a algún sitio la imagen de la vista previa?
No. La imagen que eliges para la vista previa del clip-path se muestra desde una dirección local creada por tu navegador. No se envía ni se guarda, y no aparece en el CSS generado, que solo contiene la propiedad clip-path.