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.
¿Qué es clip-path en CSS?
clip-path es una propiedad CSS que recorta un elemento a una forma básica o a una ruta. Todo lo que queda fuera de la forma se oculta, así que puedes convertir una imagen o caja rectangular en un triángulo, círculo, hexágono, banner inclinado o cualquier polígono personalizado sin editar la imagen.
¿Qué navegadores admiten clip-path?
Todos los navegadores modernos admiten las funciones de forma básicas que usa este generador: polygon(), circle(), ellipse() e inset(). Esto incluye Chrome, Edge, Firefox, Safari y Opera. El prefijo -webkit-clip-path solo es necesario en versiones muy antiguas de Safari móvil.
¿Cómo funciona el modo polígono?
En el modo polígono la vista previa muestra cada vértice como un punto arrastrable. Arrastra un punto para moverlo, haz doble clic en el espacio vacío para insertar uno nuevo, haz clic en un punto para seleccionarlo y pulsa el botón eliminar para quitarlo. El valor CSS se actualiza en tiempo real con coordenadas porcentuales.
¿Qué significan los porcentajes en polygon()?
Cada vértice se escribe como un par X Y en porcentaje, medido desde la esquina superior izquierda del elemento. Como los valores son relativos al tamaño del elemento, la forma se escala con él y se mantiene responsive en cualquier ancho de pantalla.
¿Cuál es la diferencia entre circle, ellipse e inset?
circle(radio at x y) recorta un círculo con un solo radio, ellipse(rx ry at x y) permite radios horizontales y verticales distintos, e inset( arriba derecha abajo izquierda) recorta un rectángulo contraído desde cada borde. Este generador ofrece deslizadores y campos numéricos para todos los parámetros.
¿Afecta clip-path al diseño o a los clics?
clip-path es puramente visual. El elemento conserva su caja original en la maquetación, por lo que nada a su alrededor se mueve. Sin embargo, los eventos de puntero como los clics solo se registran dentro del área visible recortada, algo útil para botones con formas personalizadas.
¿Puedo animar un clip-path?
Sí. Los navegadores pueden transicionar suavemente entre dos valores de clip-path cuando la función de forma y el número de puntos coinciden, por ejemplo de un inset grande a uno pequeño o entre dos polígonos con el mismo número de vértices. Anímalo con la propiedad CSS transition.
¿Se sube mi imagen o mis datos a algún servidor?
No. La imagen de vista previa es un degradado dibujado localmente en un canvas y todos los cálculos ocurren en tu navegador. Nada de lo que diseñes se envía a ningún servidor, por lo que la herramienta también funciona sin conexión una vez cargada.
¿Cuáles son los usos habituales de clip-path?
Los usos populares incluyen secciones hero diagonales, máscaras de avatar hexagonales o circulares, punteros triangulares de bocadillos, collages creativos, esquinas de tarjetas biseladas y botones con formas personalizadas, todo sin software de edición de imágenes.
Cómo usar Generador de Clip Path CSS
Da forma a cualquier elemento con CSS clip-path sin editar imágenes. Elige una función de forma, arrastra los tiradores y copia CSS listo para producción. Todo funciona localmente en tu navegador.
- Elige un modo: Polígono, Círculo, Elipse o Inset.
- En modo Polígono arrastra los puntos de los vértices, haz doble clic en el espacio vacío para añadir un punto y selecciona uno antes de eliminarlo.
- En los modos Círculo, Elipse e Inset ajusta cada valor con los deslizadores o escribe un porcentaje exacto.
- Observa cómo la vista previa en vivo se actualiza sobre una imagen de muestra con degradado generada localmente.
- Copia la regla clip-path de una sola línea y pégala en tu hoja de estilos.
Mantén el mismo número de puntos del polígono entre dos estados y podrás animar la forma suavemente con una transición CSS.
Herramientas relacionadas
- 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 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 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.
- 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.
- Embellecedor CSS Formatea y embellece código CSS al instante. Convierte CSS minificado en código legible y bien indentado con opciones personalizables.
- Minificador CSS Minificador CSS online gratuito. Comprime y optimiza código CSS al instante eliminando espacios, comentarios y caracteres innecesarios. Reduce el tamaño para mejor rendimiento web.