CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Тип фигуры

Радиус: 40%

Центр X: 50%

Центр Y: 50%

Предварительный просмотр

Сгенерированный CSS

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

Об этом инструменте

Генератор CSS Clip-Path создаёт значения clip-path для четырёх типов фигур: circle(), ellipse(), inset() и polygon().

Позволяет создавать творческие макеты, маски изображений и формы секций hero без SVG-файлов. Все параметры обновляют предварительный просмотр в реальном времени.

Как использовать

Выберите тип фигуры: circle, ellipse, inset или polygon.
Настройте параметры фигуры с помощью ползунков.
Для многоугольников выберите готовую фигуру из списка.
Предварительный просмотр обновляется при настройке.
Нажмите «Копировать», чтобы скопировать CSS в буфер обмена.

Случаи использования

Секции hero используют диагональные или изогнутые clip-path. Аватары используют circle(). Эффекты при наведении используют анимации clip-path.

Частые вопросы

Влияет ли clip-path на кликабельную область? — Да. Срезанные области не кликабельны.
Можно ли анимировать clip-path? — Да. Можно применять переходы между двумя фигурами-многоугольниками с одинаковым числом точек.
Поддерживается ли clip-path всеми браузерами? — Да, все современные браузеры полностью поддерживают его.