CSS Clip-path Generator — Creatieve Vormen en Maskers

CSS clip-path knipt elementen in elke gewenste vorm. Onze generator laat je vormen visueel tekenen en genereert de clip-path-code direct.

Clip-path vormen

circle() voor cirkels. ellipse() voor ellipsen. polygon() voor veelhoeken — driehoeken, diamanten, ster-achtige vormen. inset() voor rechthoeken met afgeronde hoeken. path() voor vrije SVG-paden voor maximale flexibiliteit.

Diagonale secties

polygon(0 0, 100% 0, 100% 85%, 0 100%) maakt een sectie met diagonale onderrand. Dit is populair voor hero-secties die visueel interessanter zijn dan rechte randen. Combineer met overflow: hidden voor nette randen.

Clip-path animeren

Clip-path-vormen zijn animeerbaar als ze hetzelfde aantal punten hebben. Animeer van een rechthoek naar een diamant voor een reveal-effect. Gebruik transition: clip-path 0.3s ease voor vloeiende hover-effecten op knoppen en kaarten.