CSS Clip-Path Maker
Twórz wizualnie ścieżki clip-path CSS: wielokąty, elipsy, koła i własne kształty. Kopiuj gotowy kod. Bezpłatnie online. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
CSS Clip-Path Maker online
Właściwość clip-path pozwala przyciąć element do dowolnego kształtu — trójkąta, rombu, gwiazdy, a nawet SVG path. Generator tworzy te ścieżki wizualnie, bez ręcznego liczenia współrzędnych.
Kształty do wyboru
Polygon (wielokąt z dowolną liczbą punktów), ellipse, circle, inset (prostokąt z opcjonalnym zaokrągleniem), a także gotowe presety: strzałki, gwiazdki, wstążki.
Edytor interaktywny
Przeciągaj punkty bezpośrednio na podglądzie, wartości procentowe aktualizują się w czasie rzeczywistym. Podgląd na obrazie lub bloku kolorów.
Najczęstsze pytania
Czy clip-path działa z transition?
Tak — animowanie clip-path jest płynne i wydajne (GPU-composited), idealne do efektów odsłaniania.
Jak uniknąć ucinania cieni?
clip-path ucina box-shadow; użyj filter: drop-shadow jako zamiennik.
Czy obsługuje SVG path?
Tak — wklej path z SVG, a narzędzie skonwertuje go na clip-path: path().
Do maskowania obrazów sprawdź też generator masek SVG w serwisie.