CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Vormtype

Straal: 40%

Midden X: 50%

Midden Y: 50%

Live-voorbeeld

Gegenereerde CSS

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

Over deze tool

De CSS Clip-Path Generator maakt clip-path-waarden voor vier vormtypen: circle(), ellipse(), inset() en polygon().

Maakt creatieve lay-outs, afbeeldingsmaskers en hero-sectievormen mogelijk zonder SVG-bestanden. Alle parameters werken de live-preview in realtime bij.

Hoe te gebruiken

Selecteer een vormtype: circle, ellipse, inset of polygon.
Pas de schuifregelaars aan om de vormparameters te configureren.
Kies voor veelhoeken een vooraf ingestelde vorm uit de lijst.
De live-preview wordt bijgewerkt tijdens het aanpassen.
Klik op Kopiëren om de CSS naar het klembord te kopiëren.

Gebruiksscenario's

Hero-secties gebruiken diagonale of gebogen clip-path-vormen als visuele scheidingstekens. Profielfoto's gebruiken circle(). Hover-effecten gebruiken clip-path-animaties.

Veelgestelde vragen

Beïnvloedt clip-path het klikbare gebied? — Ja. Uitgesneden gebieden zijn niet klikbaar.
Kan ik clip-path animeren? — Ja. Het kan worden overgegaan en geanimeerd tussen twee veelhoekvormen met hetzelfde aantal punten.
Wordt clip-path door alle browsers ondersteund? — Ja, met volledige ondersteuning in alle moderne browsers.