CSS clip-path-generator

CSS Clip-Path Generator är ett visuellt verktyg för att skapa och testa CSS-egenskapen clip-path. Clip-path gör att du kan klippa element till grundformer (cirkel, ellips, polygon) eller en SVG-sökväg. Verktyget erbjuder förhandsvisning i realtid och kodgenerering som hjälper dig att designa egna former för dina webbprojekt.

Klicka på valfri förinställd formknapp i panelen Presets för att applicera den direkt. Verktyget innehåller 12 inbyggda former: Triangel, Trapets, Parallellogram, Pentagon, Hexagon, Heptagon, Oktogon, Stjärna, Cirkel, Ellips, Inramning och Rundad inramning. Förhandsvisningen uppdateras omedelbart för att visa hur formen klipper elementet.

Ange vilket giltigt clip-path-värde som helst i inmatningsfältet för Custom Path. Stöder alla clip-path-funktioner: polygon(), circle(), ellipse(), inset() och path(). Verktyget visar den genererade CSS-koden med både standardprefix och -webkit- för maximal webbläsarkompatibilitet. Klicka på knappen Kopiera för att kopiera koden till urklippet.

Polygonbyggaren ger ett visuellt gränssnitt för att skapa egna polygonformer. Varje punkt definieras av X- och Y-koordinater (0–100 %). Lägg till fler punkter (minst 3) för att skapa komplexa polygoner, eller ta bort punkter för att förenkla. Byggaren genererar giltig CSS polygon()-syntax automatiskt när du justerar koordinaterna.

Anpassa förhandsvisningen genom att justera storleksreglaget (100–400 px) och använda färgväljaren för att ändra elementets bakgrundsfärg. Dessa justeringar hjälper dig att visualisera hur clip-path kommer att se ut med olika elementstorlekar och färger i din design.

CSS clip-path stöds i alla moderna webbläsare. Verktyget inkluderar automatiskt -webkit-clip-path för Safari-kompatibilitet. Observera att clip-path med path()-funktionen har begränsat stöd i äldre webbläsare. Testa alltid dina målwebbläsare innan du publicerar till produktion.