CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Formtyp

Radie: 40%

Centrum X: 50%

Centrum Y: 50%

Liveförhandsvisning

Genererad CSS

.element {
  clip-path: circle(40% at 50% 50%);
}

Om det här verktyget

CSS Clip-Path-generatorn skapar clip-path-värden för fyra formtyper: circle(), ellipse(), inset() och polygon().

Möjliggör kreativa layouter, bildmasker och hero-sektionsformer utan SVG-filer. Alla parametrar uppdaterar förhandsvisningen i realtid.

Hur man använder

Välj en formtyp: circle, ellipse, inset eller polygon.
Justera reglagen för att konfigurera formparametrarna.
För polygoner, välj en förinställd form från listan.
Liveförhandsvisningen uppdateras vid justeringar.
Klicka på Kopiera för att kopiera CSS till urklipp.

Användningsfall

Hero-sektioner använder diagonala eller böjda clip-path-former som visuella avgränsare. Profilbilder använder circle(). Hover-effekter använder clip-path-animationer.

Vanliga frågor

Påverkar clip-path det klickbara området? — Ja. Bortklippta regioner är inte klickbara.
Kan jag animera clip-path? — Ja. Det kan transitionas och animeras mellan två polygonformer med samma antal punkter.
Stöds clip-path av alla webbläsare? — Ja, med fullt stöd i alla moderna webbläsare.