Przeciągnij punkty. Wytnij dowolny kształt.
Drag the points. Cut out any shape.
Wybierz kształt startowy albo zacznij od trójkąta, potem przeciągaj punkty myszką prosto na
podglądzie — wartość clip-path: polygon(...) aktualizuje się na żywo.
Pick a starting shape or begin with a triangle, then drag points right on the preview — the
clip-path: polygon(...) value updates live.
Przeciągaj białe kropki na podglądzie. „Dodaj punkt” wstawia nowy punkt na środku najdłuższego boku. Minimum 3 punkty.
Drag the white dots on the preview. "Add point" inserts a new point at the midpoint of the longest edge. Minimum 3 points.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Wybierz punkt startowy
Pick a starting point
Kliknij gotowy kształt jako bazę do dalszej edycji, albo zostaw domyślny trójkąt.
Click a ready-made shape as a base for further editing, or keep the default triangle.
Przeciągaj punkty
Drag the points
Złap dowolny biały punkt myszką i przesuń go — kształt i kod aktualizują się na bieżąco.
Grab any white handle with your mouse and move it — the shape and code update as you go.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotową wartość clip-path do swojego arkusza stylów.
Click "Copy" and paste the ready clip-path value into your stylesheet.
- Nietypowe kształty zdjęć i kart w sekcjach hero.
- Dymki dialogowe i etykiety w kształcie strzałki.
- Dekoracyjne przecięcia teł między sekcjami strony.
- Unconventional image and card shapes in hero sections.
- Speech bubbles and arrow-shaped labels.
- Decorative background cutouts between page sections.
Czym jest ten generator? To wizualne narzędzie do budowania
wartości CSS clip-path: polygon() przez przeciąganie punktów, zamiast zgadywania
współrzędnych procentowych na oko.
What is this tool? A visual way to build a CSS
clip-path: polygon() value by dragging points, instead of guessing percentage
coordinates by eye.
Co robi clip-path w CSS?
What does clip-path do in CSS?
Właściwość clip-path ogranicza widoczny obszar elementu do
podanego kształtu — reszta elementu (poza kształtem) staje się niewidoczna, choć nadal
zajmuje miejsce w layoucie.
The clip-path property limits an element's visible area to the
given shape — everything outside that shape becomes invisible, though it still occupies
space in the layout.
Czym różni się to od border-radius?
How is this different from border-radius?
border-radius tylko zaokrągla rogi prostokąta.
clip-path: polygon() pozwala na dowolny kształt wielokątny — trójkąty,
strzałki, gwiazdy, nie tylko zaokrąglone prostokąty.
border-radius only rounds a rectangle's corners.
clip-path: polygon() allows any polygonal shape — triangles, arrows, stars,
not just rounded rectangles.
Czy mogę animować zmianę kształtu?
Can I animate a shape change?
Tak, pod warunkiem że oba kształty mają tę samą liczbę punktów — wtedy
przeglądarka może płynnie animować przejście między dwiema wartościami polygon().
Yes, as long as both shapes have the same number of points — then the browser
can smoothly animate the transition between two polygon() values.
Czy clip-path działa we wszystkich przeglądarkach?
Does clip-path work in every browser?
Składnia polygon() jest wspierana przez wszystkie aktualne
przeglądarki bez prefiksów.
polygon() syntax is supported by all current browsers without prefixes.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce.
No. The generator runs entirely in your browser.
Czym jest CSS Clip-Path Shape Generator?
Wartość clip-path: polygon() opisuje kształt jako listę punktów w
procentach szerokości i wysokości elementu — im więcej punktów, tym bardziej złożony
kształt. Problem polega na tym, że ręczne wpisywanie współrzędnych procentowych bez
podglądu jest praktycznie niemożliwe do zrobienia z wyczuciem — nie widać efektu, dopóki
nie odświeżysz strony.
Jak działa przeciąganie punktów
Każdy punkt na podglądzie odpowiada jednej parze współrzędnych w wartości
polygon(). Przeciągając punkt, zmieniasz jego pozycję procentową względem
całego obszaru elementu — generator natychmiast przelicza to na nową wartość CSS i
odświeża zarysowany kształt.
Kiedy dodawać, a kiedy usuwać punkty
- Więcej punktów pozwala na bardziej szczegółowe, nieregularne kształty (gwiazdy, strzałki, dymki).
- Mniej punktów daje czystsze, prostsze formy (trójkąty, romby) — łatwiejsze też do animowania.
- Jeśli planujesz animację między dwoma kształtami, zadbaj żeby oba miały tę samą liczbę punktów.
Praktyczne wskazówki
Pamiętaj, że clip-path ukrywa treść wykraczającą poza kształt, ale nie
zmienia obszaru zajmowanego w layoucie — element nadal zachowuje się jak swój oryginalny
prostokąt przy obliczaniu przepływu strony. Jeśli chcesz, żeby sąsiednie elementy "opływały"
nietypowy kształt, potrzebujesz dodatkowo własności shape-outside.
Wdrożenie w produkcji
Skopiowaną wartość wklej jako clip-path elementu, na którym chcesz zastosować
kształt — obrazka, diva z gradientem, albo karty. Warto dodać płynne przejście
(transition: clip-path .3s), żeby zmiana kształtu przy hover wyglądała elegancko.
What is a CSS Clip-Path Shape Generator?
A clip-path: polygon() value describes a shape as a list of points in
percentages of the element's width and height — the more points, the more complex the
shape. The trouble is that typing percentage coordinates by hand without a preview is
practically impossible to do with any real feel — you don't see the effect until you refresh the page.
How point dragging works
Each point on the preview corresponds to one coordinate pair in the polygon()
value. Dragging a point changes its percentage position relative to the element's full area
— the generator immediately recalculates the new CSS value and redraws the outlined shape.
When to add points, and when to remove them
- More points allow more detailed, irregular shapes (stars, arrows, speech bubbles).
- Fewer points give cleaner, simpler forms (triangles, diamonds) — also easier to animate.
- If you plan to animate between two shapes, make sure both have the same number of points.
Practical tips
Remember that clip-path hides content outside the shape but doesn't change the
space occupied in the layout — the element still behaves like its original rectangle when
the page flow is calculated. If you want neighboring elements to "flow around" an
unconventional shape, you additionally need the shape-outside property.
Using it in production
Paste the copied value as the clip-path of the element you want shaped — an
image, a gradient div, or a card. It's worth adding a smooth transition
(transition: clip-path .3s) so a shape change on hover looks polished.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Grid, gradienty, cienie i zaokrąglenia — wszystko w jednym miejscu, bez instalacji.
Grid, gradients, shadows, and border radius — all in one place, no install needed.