Skip to main content
FreeToolkit .ai

Generador de CSS Clip Path Crea formas de clip-path de CSS con preestablecidos de polígono, círculo y elipse.

Generador de CSS Clip Path illustration
🎨

Generador de CSS Clip Path

Crea formas de clip-path de CSS con preestablecidos de polígono, círculo y elipse.

1

Selecciona una forma preestablecida

Elige entre formas preestablecidas como triángulo, hexágono, estrella, círculo o elipse.

2

Personaliza la ruta

Edita directamente el valor de clip-path para tener un control preciso sobre la forma.

3

Copia el CSS

Previsualiza la forma recortada y copia el CSS con el prefijo webkit incluido.

Loading tool...

What Is Generador de CSS Clip Path?

El Generador de CSS Clip Path crea máscaras de recorte para elementos HTML utilizando la propiedad clip-path. La propiedad clip-path define una región visible para un elemento, escondiendo todo lo que esté fuera del camino. Esta herramienta admite varias funciones de forma: polígono para formas personalizadas con múltiples puntos, círculo para recortes circulares, elipse para formas ovaladas e inset para recortes rectangulares con redondeo opcional. Una biblioteca de formas preestablecidas incluye triángulo, trapecio, paralelogramo, rombo, pentágono, hexágono y estrella. También puedes editar directamente el valor de clip-path para formas personalizadas. El CSS generado incluye el prefijo -webkit-clip-path para una mayor compatibilidad con los navegadores. La propiedad clip-path es poderosa para crear diseños no rectangulares, máscaras de imagen, divisores de sección creativos y formas únicas de elementos de interfaz de usuario.

Why Use Generador de CSS Clip Path?

  • Amplia biblioteca de formas preestablecidas que incluye polígonos, círculos y estrellas
  • Edición directa de valores de clip-path para formas personalizadas
  • Incluye prefijo webkit para una mayor compatibilidad con los navegadores
  • Previsualización en tiempo real con color de fondo personalizable

Common Use Cases

Máscaras de imagen

Recorta imágenes en formas personalizadas como círculos, hexágonos o estrellas.

Divisores de sección

Crea transiciones de sección anguladas o curvas con clip-path.

Diseños creativos

Construye áreas de contenido no rectangulares para diseños de página únicos.

Fotos de perfil

Recorta los avatares de usuario en formas hexagonales o redondeadas.

Technical Guide

La propiedad CSS clip-path admite varias funciones de forma: polygon() define una forma utilizando pares de coordenadas como porcentajes o longitudes. circle() crea un recorte circular con radio y posición central. ellipse() crea una forma ovalada con radios horizontales y verticales. inset() crea un recorte rectangular con redondeo opcional de borde. La función polígono admite cualquier número de pares de coordenadas x e y, lo que la hace muy flexible. Las coordenadas son relativas al elemento, siendo 0% 0% la esquina superior izquierda y 100% 100% la esquina inferior derecha. Para animaciones, clip-path se puede transicionar si se utiliza la misma función de forma con el mismo número de puntos. La compatibilidad con los navegadores es buena en los navegadores modernos, pero se recomienda utilizar el prefijo -webkit- para Safari. La propiedad clip-path no afecta el diseño, ya que el elemento mantiene sus dimensiones originales del modelo de caja.

Tips & Best Practices

  • 1
    Comienza con una forma preestablecida y modifica los valores para crear formas personalizadas
  • 2
    Utiliza el mismo número de puntos de polígono para transiciones animables
  • 3
    Combina con transiciones CSS para efectos de revelar y morfear
  • 4
    clip-path funciona bien en imágenes y elementos de fondo

Related Tools

Generador de triángulos CSS - free online tool

Generador de triángulos CSS

Genera triángulos CSS utilizando la técnica del borde con controles de dirección y color.

🎨 CSS & Design
Generador de formas de globo CSS - free online tool

Generador de formas de globo CSS

Genera formas de globo orgánicas como SVG con rellenos degradados y aleatorización.

🎨 CSS & Design
Generador de Onda CSS - free online tool

Generador de Onda CSS

Genera divisores de sección de onda SVG personalizables con olas, altura y colores.

🎨 CSS & Design
Generador de divisores CSS - free online tool

Generador de divisores CSS

Genera divisores de sección CSS con múltiples estilos, incluyendo degradado, sombra y zigzag.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Afeta clip-path el diseño del elemento?
No, el elemento mantiene su modelo de caja completo. Solo la representación visible se ve afectada por el recorte.
Q ¿Puedo animar clip-path?
Sí, clip-path admite transiciones CSS cuando se utilizan la misma función y número de puntos en ambos estados.
Q ¿Está soportado clip-path en todos los navegadores?
Los navegadores modernos soportan clip-path. El prefijo -webkit- garantiza la compatibilidad con Safari. IE no admite clip-path.
Q ¿Puedo recortar texto con clip-path?
Sí, clip-path funciona en cualquier elemento HTML, incluyendo contenedores de texto. Utilice -webkit-background-clip: text para recorte específico de texto.
Q ¿Cuál es la diferencia entre clip-path y máscara?
clip-path utiliza funciones de forma para recortar con bordes duros. La máscara CSS utiliza imágenes o gradientes y admite bordes suaves y transparencia parcial.

About This Tool

Generador de CSS Clip Path is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.