Создать аккаунт
Интерфейсы и CSSРаботает в браузере

Генератор CSS clip-path

Настройте простую shape mask без canvas, SVG export или runtime parsing полного CSS.

  • Inset/circle/ellipse/polygon
  • 0–100% values
  • Локальный preview
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Polygon: x1 y1 x2 y2 x3 y3 x4 y4. Inset: top right bottom left. Circle: radius x y. Ellipse: rx ry x y.

Результат

Preview
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Выберите shape mode.

  2. 2

    Введите bounded процентные значения.

  3. 3

    Проверьте preview и скопируйте clip-path declaration.

02

Что умеет инструмент

  • Inset, circle, ellipse и polygon из четырёх точек.
  • Проверка значений в диапазоне 0–100%.
  • Вывод plain CSS без изображения или SVG export.
03

Когда пригодится

  • Быстрая shape mask для карточки, hero image или decorative surface.
  • Проверка процента перед переносом в design token.
  • Прототипирование simple CSS-only visual effect.
04

Что происходит внутри

Все значения валидируются как проценты и не выполняют пользовательский CSS.

Preview применяет только сгенерированное clip-path value.

05

Вопросы и ответы

Можно добавить больше точек polygon?

Нет. Batch ограничен четырьмя точками, чтобы инструмент оставался bounded.

Поддерживается clip-path path()?

Нет. path() требует другого parser/editor workflow и не входит в этот R0 batch.