CSS Clip-path Generator
Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.
Wat is clip-path in CSS?
clip-path is een CSS-eigenschap die een element bijsnijdt volgens een basissvorm of pad. Alles buiten de vorm wordt verborgen, waardoor je een rechthoekige afbeelding of box kunt omtoveren tot een driehoek, cirkel, zeshoek, schuine banner of willekeurige aangepaste polygoon, zonder de afbeelding zelf te bewerken.
Welke browsers ondersteunen clip-path?
Alle moderne browsers ondersteunen de basisvormfuncties die deze generator gebruikt: polygon(), circle(), ellipse() en inset(), waaronder Chrome, Edge, Firefox, Safari en Opera. Het voorvoegsel -webkit-clip-path is alleen nodig voor heel oude mobiele Safari-versies.
Hoe werkt de polygoonmodus?
In de polygoonmodus toont het voorbeeld elk hoekpunt als versleepbaar punt. Sleep een punt om te verplaatsen, dubbelklik op lege ruimte om een nieuw punt toe te voegen, klik een punt aan om het te selecteren en gebruik de verwijderknop. De CSS-waarde wordt realtime bijgewerkt met procentcoördinaten.
Wat betekenen de percentages in polygon()?
Elk hoekpunt wordt geschreven als een X Y-paar in procenten, gemeten vanaf de linkerbovenhoek van het element. Omdat de waarden relatief zijn aan de elementgrootte, schaalt de vorm mee en blijft hij responsief bij elke schermbreedte.
Wat is het verschil tussen circle, ellipse en inset?
circle(straal at x y) snijdt een cirkel met één straal uit, ellipse(rx ry at x y) laat verschillende horizontale en verticale stralen toe, en inset(boven rechts onder links) snijdt een rechthoek die vanaf elke rand inkrimpt. Deze generator geeft schuifregelaars en getalvelden voor alle parameters.
Beïnvloedt clip-path de lay-out of klikken?
clip-path is puur visueel. Het element behoudt zijn oorspronkelijke box in de lay-out, dus niets eromheen schuift. Muis- en aanraakgebeurtenissen zoals klikken werken echter alleen binnen het zichtbare bijgesneden gebied, handig voor knoppen in eigen vorm.
Kan ik clip-path animeren?
Ja. Browsers kunnen vloeiend tussen twee clip-path-waarden overgaan als de vormfunctie en het aantal punten overeenkomen, bijvoorbeeld van een grote naar een kleine inset, of tussen twee polygonen met evenveel hoekpunten. Animeer het met de CSS-eigenschap transition.
Wordt mijn afbeelding of data geüpload?
Nee. De voorbeeldafbeelding is een lokaal op een canvas getekend verloop en alle berekeningen gebeuren in je browser. Niets van wat je ontwerpt wordt naar een server gestuurd, dus de tool werkt na het laden ook offline.
Wat zijn veelvoorkomende toepassingen van clip-path?
Populair zijn diagonale hero-secties, zeshoekige of ronde avatarmaskers, driehoekige tekstdialoogpunten, creatieve fotocollages, afgeschuinde kaarthoeken en knoppen in eigen vorm, allemaal zonder fotobewerkingssoftware.
Hoe CSS Clip-path Generator te gebruiken
Geef elk element vorm met CSS clip-path in plaats van afbeeldingen te bewerken. Kies een vormfunctie, sleep de handvatten en kopieer productieklare CSS. Alles draait lokaal in je browser.
- Kies een modus: Veelhoek, Cirkel, Ellips of Inset.
- Sleep in de Veelhoek-modus de hoekpunten, dubbelklik op lege ruimte om een punt toe te voegen en selecteer er een voordat je die verwijdert.
- Stel in de modussen Cirkel, Ellips en Inset elke waarde fijn af met de schuifjes of typ een exact percentage.
- Kijk hoe de live preview zich actualiseert over een lokaal gegenereerde gradiëntvoorbeeldafbeelding.
- Kopieer de éénregelige clip-path-regel en plak die in je stylesheet.
Houd hetzelfde aantal veelhoekpunten tussen twee toestanden aan en je kunt de vorm vloeiend animeren met een CSS-transition.
Gerelateerde tools
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
- CSS Beautifier Formatteer en verfraai CSS-code direct. Converteer gecomprimeerde CSS naar leesbare code met aanpasbare opties.
- CSS Minifier Gratis online CSS minifier. Comprimeer en optimaliseer CSS-code direct door spaties, opmerkingen en onnodige tekens te verwijderen. Verklein de bestandsgrootte voor snellere webprestaties.