Generator CSS clip-path
Twórz wartości CSS clip-path wizualnie: polygon, circle, ellipse, inset, path. Podgląd na żywo na elemencie HTML lub obrazie. Kopiuj gotowy CSS. Bezpłatnie.
-
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";
}
💡 Przeciągaj białe punkty na podglądzie, aby edytować wielokąt na żywo.
Ustawienia kształtu
Kod wynikowy CSS
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Kształt
zmień przyciskami u góry
Punkty wielokąta
dla polygon; koło, elipsa i wcięcie mają parametry zamiast punktów
Rozmiar kodu CSS
Prefiks -webkit-
dla starszych Safari i Chrome
| Kształt | Składnia generowana przez narzędzie | Przykład (domyślne ustawienia) | Wsparcie w przeglądarkach |
|---|---|---|---|
| Wielokąt | polygon(X% Y%, X% Y%, …) — pary X Y rozdzielone przecinkami, minimum 3 punkty | polygon(50% 0%, 0% 100%, 100% 100%) | Chrome/Edge 55+, Firefox 54+, Safari 9.1+ (z prefiksem -webkit-) |
| Koło | circle(R% at X% Y%) — promień i środek w procentach | circle(44% at 50% 48%) | Chrome/Edge 79+, Firefox 54+, Safari 13.1+ |
| Elipsa | ellipse(RX% RY% at X% Y%) — dwa promienie i środek | ellipse(58% 40% at 50% 50%) | Chrome/Edge 79+, Firefox 54+, Safari 13.1+ |
| Wcięcie | inset(T% R% B% L% [round N%]) — krawędzie jak w margin, opcjonalne round | inset(8% 10% 12% 10% round 12%) | Chrome/Edge 79+, Firefox 54+, Safari 13.1+ |
Przy opcji „Dodaj prefiks -webkit-” każda reguła dostaje dodatkowo linię -webkit-clip-path: …; przed clip-path: …; — dla starszych wersji Safari i Chrome. Punkty wielokąta są przycinane do zakresu 0–100% (kod clampuje obie współrzędne), a przy mniej niż 3 punktach generator wraca do trójkąta.
Warto wiedzieć — clip-path w praktyce
Clip-path a wydajność
Obcięcie wykonuje karta graficzna i nie wymusza przeliczania layoutu, więc animowanie clip-path (np. przejście między dwoma polygon() o tej samej liczbie punktów) jest zwykle płynne. Zmiana liczby punktów albo kształtów w trakcie animacji przerywa interpolację — przeglądarka skacze do końcowej wartości.
Obcięte fragmenty nie łapią kliknięć
clip-path obcina też trafienia wskaźnika: obszary poza kształtem nie reagują na hover ani kliknięcie, choć wizualnie należą do prostokątnego pudełka elementu. To wygodny sposób na nieprzekątnne przyciski bez obrazków, ale pamiętaj o tym przy nakładających się elementach.
Layout i dostępność bez zmian
Element zachowuje swoje miejsce w dokumentu — obcinany jest tylko obraz, nie pudełko. Treść poza kształtem nadal istnieje dla czytników ekranu i wyszukiwarek, więc nie chowaj w ten sposób tekstu, który ma być ukryty. Do miękkiego maskowania brzegów służy z kolei mask-image, nie clip-path.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator CSS clip-path – wytnij elementy HTML w dowolny kształt
CSS clip-path pozwala "wyciąć" element HTML w dowolny kształt – trójkąt, sześciokąt, gwiazda, niestandardowy wielokąt. Bez SVG, bez Canvas – czysty CSS. Narzędzie generuje wartość clip-path przez przeciąganie węzłów w podglądzie na żywo.
Typy wartości clip-path
polygon(x1 y1, x2 y2, ...): dowolny wielokąt. circle(radius at cx cy): koło. ellipse(rx ry at cx cy): elipsa. inset(top right bottom left round radius): prostokąt z zaokrągleniami. path("M..."): ścieżka SVG – najgibsza opcja. none: brak maskowania (resetowanie).
Jednostki i wartości
Procenty (%, relatywne do elementu): polygon(50% 0%, 100% 100%, 0% 100%) – trójkąt zajmujący cały element. Piksele (px, absolutne): dla precyzyjnych kształtów o stałych wymiarach. vw/vh: relatywne do viewportu. Mieszanie: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%).
Animacja clip-path
CSS transition: .element { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s ease; } .element:hover { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }. Oba kształty muszą mieć tę samą liczbę punktów! GSAP MorphSVG: animacja między różnymi liczbami punktów.
Zastosowania w UI/UX
Trójkątne dekoracje sekcji (zastępuje SVG separatory). Sześciokątne karty (hexagonal grid). Ukośne nagłówki (skewed hero sections). Maski awatarów (polygon zamiast border-radius). Efekty hover: clip-path z transition = rozwijający się element. reveal animations przy scroll.
Jak działa generator: od węzła do wartości clip-path
W podglądzie widzisz prostokąt odpowiadający elementowi, który chcesz wyciąć. Każdy węzeł ma swoją pozycję poziomą (X) i pionową (Y), wyrażoną w pikselach obszaru roboczego. Generator dzieli te wartości przez szerokość i wysokość podglądu, a wynik mnoży przez 100 – tak powstaje para procentów: punkt w połowie szerokości i na samej górze daje 50% 0%. Węzły zapisywane są w kolejności, w jakiej je dodajesz lub przesuwasz, i trafiają do funkcji polygon() jako lista par „x y” rozdzielonych przecinkami.
Procenty są domyślnym wyborem, bo opisują kształt względem rozmiaru elementu – ten sam kod zadziała na małej karcie i na pełnoekranowym banerze. Gdy potrzebujesz nacięcia o stałym wymiarze, niezależnym od szerokości kontenera, możesz w wygenerowanej wartości ręcznie zamienić procenty na piksele albo wpisać wyrażenie z calc().
Przeglądarka rysuje wielokąt na podstawie tych współrzędnych i przycina element: widoczne oraz klikalne zostaje tylko to, co znajdzie się w środku kształtu. Sam element nadal istnieje w dokumencie i zajmuje swoje miejsce w układzie – nie tworzy wokół siebie dodatkowej przestrzeni, a wycięte fragmenty nie są usuwane z DOM.
Przykład krok po kroku: trapez pod sekcję hero
- Ustaw w podglądzie obszar roboczy o proporcjach docelowej sekcji – w tym przykładzie 1200 × 400 px, czyli szeroki i niski baner.
- Wybierz kształt wielokąta (polygon). Na start dostajesz prostokąt z czterema węzłami w narożnikach: 0 0, 1200 0, 1200 400, 0 400.
- Przeciągnij lewy górny węzeł w prawo, z pozycji X = 0 na X = 200. Generator przelicza 200 / 1200 × 100 = 16,7% i zapisuje punkt 16.7% 0%.
- Przeciągnij prawy górny węzeł w lewo, z X = 1200 na X = 1000. Po przeliczeniu 1000 / 1200 × 100 = 83,3% powstaje punkt 83.3% 0%. Dzięki temu górna krawędź jest węższa od dolnej.
- Dolne węzły zostaw w narożnikach – ich pozycje to 0% 100% i 100% 100%. Kształt jest już gotowy, liczba punktów nie zmieniła się (nadal cztery).
- Skopiuj wynikową wartość i wklej ją do reguły CSS: clip-path: polygon(0% 100%, 16.7% 0%, 83.3% 0%, 100% 100%);
Przeliczanie pozycji węzła na wartości procentowe
| Pozycja X węzła (px) | Element o szerokości 1200 px | Element o szerokości 800 px |
|---|---|---|
| 0 | 0% | 0% |
| 100 | 8,3% | 12,5% |
| 200 | 16,7% | 25% |
| 400 | 33,3% | 50% |
| 600 | 50% | 75% |
| 800 | 66,7% | 100% |
Praktyczne wskazówki
- Zaczynaj od gotowego presetu – przesunięcie kilku istniejących węzłów jest szybsze i bezpieczniejsze niż budowanie wielokąta od pierwszego punktu, przy którym łatwo pomylić kolejność.
- Trzymaj kolejność węzłów zgodną z ruchem wskazówek zegara – polygon() łączy punkty w podanej kolejności; chaotyczne przestawienie współrzędnych daje figurę z przecięciami zamiast oczekiwanego konturu.
- Procenty do kształtów responsywnych, piksele do nacięć – wartości procentowe skalują się razem z elementem, więc ten sam kod działa przy różnych szerokościach; piksele wybieraj wtedy, gdy nacięcie ma mieć stały wymiar.
- Pamiętaj o treści wewnątrz elementu – clip-path obcina wszystko, co wyjdzie poza kontur, także tekst i przyciski; dodaj padding albo ustaw kształt tak, aby najważniejsza treść leżała w środku.
- Sprawdź proporcje na docelowym elemencie – wielokąt dopasowany do kwadratu wygląda inaczej na szerokim banerze i na wąskiej karcie, więc przetestuj co najmniej dwie szerokości okna.
Czego generator nie uwzględnia
- Zawartości elementu – narzędzie nie wie, gdzie znajdzie się tekst, obraz czy przycisk, i nie ostrzeże, że po przycięciu nagłówek stanie się nieczytelny albo zniknie.
- Prefiksów i wsparcia przeglądarek – zwracana jest sama wartość clip-path; generator nie dopisuje właściwości -webkit-clip-path dla starszych przeglądarek ani nie sprawdza, czy wybrana funkcja, np. path(), jest w nich obsługiwana.
- Krzywych i zaokrągleń – praca odbywa się na prostoliniowych węzłach wielokąta, więc łuki wymagają ręcznego użycia circle(), ellipse(), inset() z parametrem round albo wpisania ścieżki path().
- Interakcji i wydajności – podgląd nie pokazuje, że obszar poza kształtem nie reaguje na klik i hover, ani nie mierzy kosztu animowania clip-path na dużym elemencie.
Najczęstsze pytania
Jakie przeglądarki obsługują CSS clip-path?
clip-path na elementach HTML: Chrome 55+, Firefox 54+, Safari 9.1+ (prefiks -webkit- dla starszych). path() wartość: Chrome 88+, Firefox 71+, Safari 13.1+. IE11: nie obsługuje clip-path (tylko SVG clip-path z prefiksem). Caniuse: clip-path = ~97% wsparcie globalne (2024).
Czy clip-path wpływa na layout (zajmowane miejsce)?
Clip-path ukrywa wizualnie ale element nadal zajmuje miejsce w layoutcie (inaczej niż display:none). Interakcja (click): zależy od przeglądarki – niektóre ignorują kliknięcia w "wyciętym" obszarze. overflow: hidden + clip-path: różne zachowanie.
Jak zrobić ukośny nagłówek (diagonal section)?
Metoda clip-path: .section { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }. Metoda transform: transform: skewY(-3deg) na sekcji + contra-skew wewnątrz. Metoda SVG: separator wave SVG pod sekcją. Clip-path: najczystsze CSS-only rozwiązanie.
Czy clip-path działa na filmach (video)?
Tak – clip-path działa na dowolnym elemencie HTML, w tym <video>, <canvas>, <iframe> (z ograniczeniami cross-origin). Efekt: video w kształcie serca, sześciokąta itd.
Jak clip-path wpływa na dostępność?
Wyciąte obszary mogą być "niewidoczne" ale nadal dostępne dla czytnika ekranu (AT). Jeśli wycięty fragment zawiera treść – może być mylące. Dla czysto dekoracyjnych elementów: aria-hidden="true". Kontrast: clip-path nie zmienia kontrastu kolorów.
Jak zrobić sześciokąt w clip-path?
Potrzebujesz wielokąta z sześcioma punktami: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Kolejność punktów zgodna z ruchem wskazówek zegara daje symetryczny kształt, który można układać w siatkę heksagonalną.
Czy clip-path działa na obrazkach i wideo?
Tak, właściwość stosuje się do każdego elementu HTML – także do img, video i figure. Przycinany jest cały element wraz z zawartością, czyli obrazem, tłem i tekstem.
Dlaczego clip-path nie działa w starszej wersji Safari?
Starsze wersje Safari wymagają prefiksu -webkit-clip-path; właściwość bez prefiksu obsługiwana jest od Safari 9.1. Wartość path() pojawiła się dopiero w Safari 13.1, więc dla starszych przeglądarek lepiej zostać przy polygon(), circle() lub inset().
Czy clip-path usuwa element z układu strony?
Nie. Element nadal zajmuje swoje miejsce w dokumencie i wpływa na rozmieszczenie sąsiadów – zmienia się tylko widoczny i klikalny obszar. Fragmenty poza kształtem nie reagują na klik ani hover.
Jak zaokrąglić rogi kształtu w clip-path?
Wielokąt polygon() nie obsługuje zaokrągleń. Zamiast niego użyj inset() z parametrem round przy prostokątach albo circle() i ellipse(), gdy potrzebujesz łuków. Gładkie krzywe można też uzyskać wartością path().
Powiązane narzędzia: generator SVG blob, generator wielokątów SVG i piaskownica CSS Grid.