CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Typ kształtu

Promień: 40%

Środek X: 50%

Środek Y: 50%

Podgląd na żywo

Wygenerowany CSS

.element {
  clip-path: circle(40% at 50% 50%);
}

O tym narzędziu

Generator CSS Clip-Path tworzy wartości clip-path dla czterech typów kształtów: circle(), ellipse(), inset() i polygon().

Umożliwia kreatywne układy, maski obrazów i kształty sekcji hero bez plików SVG. Wszystkie parametry aktualizują podgląd w czasie rzeczywistym.

Jak używać

Wybierz typ kształtu: circle, ellipse, inset lub polygon.
Dostosuj suwaki, aby skonfigurować parametry kształtu.
Dla wielokątów wybierz gotowy kształt z listy.
Podgląd na żywo aktualizuje się podczas dostosowywania.
Kliknij Kopiuj, aby skopiować CSS do schowka.

Przypadki użycia

Sekcje hero używają ukośnych lub zakrzywionych clip-path jako separatorów wizualnych. Zdjęcia profilowe używają circle(). Efekty hover używają animacji clip-path.

Często zadawane pytania

Czy clip-path wpływa na klikalny obszar? — Tak. Wycinane obszary nie są klikalne.
Czy mogę animować clip-path? — Tak. Można przejść między dwoma kształtami wielokątów z tą samą liczbą punktów.
Czy clip-path jest obsługiwany przez wszystkie przeglądarki? — Tak, z pełnym wsparciem we wszystkich nowoczesnych przeglądarkach.