CSS Clip-Path Generator

Deze tool genereert een CSS clip-path-waarde vanuit een vormpreset — cirkel, ellips, driehoek, vijfhoek, zeshoek, ster of een afgeronde rechthoek — en toont de geknipte vorm live op een voorbeeldvak voordat je de CSS kopieert. Er is geen noodzaak om polygon()-coördinaten met de hand te berekenen voor gangbare vormen.

Wat is deze tool?

clip-path is de CSS-eigenschap die alles buiten een gedefinieerd gebied van een element verbergt, waardoor alleen de vorm erbinnen zichtbaar blijft — de rest van de box van het element blijft in de layout aanwezig, alleen wordt hij niet getekend. Het accepteert basisvormfuncties zoals circle(), ellipse(), inset() en polygon(), waarbij de laatste een willekeurige lijst van x/y-coördinaatparen aanneemt om elke rechtlijnige vorm te definiëren.

polygon()-coördinaten zijn het lastigste om met de hand te schrijven — een vijfhoek, zeshoek of ster heeft elk meerdere precies geplaatste punten nodig, en één fout vervormt de hele vorm. Deze tool berekent die coördinaten voor je op basis van een vormpreset, werkt het live voorbeeld direct bij en geeft je de exacte clip-path CSS om te kopiëren.

Bron: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — de specificaties die clip-path en de basisvormfuncties definiëren.

Waarom gebruiken?

Live voorbeeld knipt een echt voorbeeldvak naar de gekozen vorm, zodat je het echte resultaat ziet in plaats van het uit coördinaten te moeten voorstellen.
Zeven vormpresets — cirkel, ellips, driehoek, vijfhoek, zeshoek, ster en afgeronde rechthoek — dekken het overgrote deel van de clip-path-toepassingen zonder polygon-punten met de hand te schrijven.
De presets cirkel, ellips en afgeronde-rechthoek hebben een grootte-/afrondingsschuif zodat je de vorm kunt verfijnen zonder coördinaten te bewerken.
Levert standaard clip-path CSS klaar om op elk element te plakken.
Draait volledig in je browser — niets van wat je configureert wordt ergens naartoe geüpload. Gratis, geen aanmelding, werkt op mobiel.

Hoe te gebruiken

Kies een vorm uit het dropdownmenu — cirkel, ellips, driehoek, vijfhoek, zeshoek, ster of afgeronde rechthoek.
Pas voor cirkel-, ellips- en afgeronde-rechthoekvormen de grootte-/afrondingsschuif aan om de clip te verfijnen.
Bekijk hoe het voorbeeldvak live bijwerkt terwijl je de vorm of schuif verandert.
Kopieer de gegenereerde clip-path CSS en plak hem op het element dat je wilt knippen.
Voor een afbeelding in plaats van een effen kleur pas je dezelfde clip-path-eigenschap toe op een <img> of een element met een background-image.

Voorbeeld

Invoer

Vorm: Zeshoek

Uitvoer

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Een clip in de vorm van een regelmatige zeshoek, vaak gebruikt voor badge-achtige profielfoto's of functie-iconen.

Basisvormen versus polygon()

Circle, ellipse en inset (afgeronde rechthoek) zijn ingebouwde CSS-basisvormfuncties met een eigen eenvoudige syntax — een straal of twee, plus een optionele centrumpositie of hoekafronding. Driehoek, vijfhoek, zeshoek en ster zijn geen ingebouwde vormen; ze worden allemaal uitgedrukt met polygon(), een platte lijst van x/y-coördinaatparen die de omtrek van de vorm volgt. Deze tool berekent die coördinaten automatisch voor regelmatige (gelijkmatig verdeelde) veelhoeken en een vijfpuntige ster, wat het lastigste deel is om met de hand goed te krijgen.

Veelvoorkomende clip-path-patronen

Ronde avatar of badge: circle() met een gemiddelde straal, vaak gecombineerd met een vierkante bronafbeelding zodat de cirkel niet tot een ellips wordt uitgerekt.
Schuine sectiescheiding: een aangepaste polygon (niet als preset opgenomen hier) die de boven- of onderrand van een volle-breedte sectie schuin maakt voor een niet-rechthoekige pagina-onderbreking.
Sterbeoordelingsicoon of badgevorm: de sterpreset, nuttig als decoratieve vorm in plaats van met de hand getekende SVG voor eenvoudige gevallen.
Zeshoekig fotoraster: zeshoekig geknipte afbeeldingen in een honingraatlayout, een veelvoorkomend patroon voor portfolio-/teampagina's.
Afgeronde rechthoek als lichtgewicht alternatief voor border-radius wanneer de clip ook overlopende onderliggende content moet afsnijden, aangezien border-radius alleen niet snijdt zonder extra overflow:hidden.

Combineren met andere CSS-tools

clip-path wordt vaak gecombineerd met een CSS-gradient als de te knippen achtergrond, of met een box-shadow toegepast op een omringend element (aangezien clip-path ook de eigen schaduw van een element knipt, is een schaduw op een bovenliggend element de gebruikelijke oplossing voor een geknipte vorm die toch lijkt te zweven).

→ CSS Gradient Generator · Border Radius Generator · Box Shadow Generator

Veelgestelde vragen

Beïnvloedt clip-path de layoutgrootte van het element?

Nee — het element behoudt zijn oorspronkelijke boxgrootte en -positie voor layoutdoeleinden; clip-path verandert alleen wat er getekend wordt. Omringende elementen worden geplaatst alsof de clip niet is toegepast, wat kan verrassen als je verwacht dat de geknipte vorm zich als een verkleind element gedraagt.

Waarom verschijnt mijn box-shadow niet op mijn geknipte vorm?

clip-path knipt de volledige weergave van het element, inclusief elke schaduw die het werpt, dus de eigen box-shadow van een cirkel- of polygon-geknipt element wordt afgesneden bij de clipgrens. Om een schaduw te krijgen die de zichtbare vorm volgt, pas je box-shadow toe op een niet-geknipt omringend element in plaats van op het geknipte element zelf.

Kan ik een clip-path-vorm animeren of overgangen laten maken?

Ja, maar alleen tussen twee clip-path-waarden van hetzelfde type en met hetzelfde aantal punten — bijvoorbeeld één polygon() met 6 punten die overgaat naar een andere polygon() met 6 punten. Overgangen tussen fundamenteel verschillende vormen (een circle() naar een polygon()) animeren over het algemeen niet vloeiend in alle browsers.

Kan clip-path worden gebruikt op achtergrondafbeeldingen, niet alleen op elementcontent?

clip-path knipt het hele element — inclusief de background-image, background-color, randen en content samen — in plaats van specifiek de achtergrond. Wil je alleen een achtergrondafbeelding knippen terwijl andere content ongeknipt blijft, pas dan clip-path toe op een apart element dat alleen de achtergrond bevat.

Wordt clip-path ondersteund in alle moderne browsers?

Ja — clip-path met basisvormfuncties (circle, ellipse, inset, polygon) is sinds januari 2020 Baseline widely available in alle grote browsers, volgens de compatibiliteitsgegevens van MDN. Het is over het algemeen veilig te gebruiken in productie zonder fallback voor huidige browserversies.