UTILS.
Приватность по умолчанию
◇

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

Обрежьте элемент в распространённые фигуры и скопируйте CSS clip-path.

Ваши файлы остаются на этом устройстве

Файлы обрабатываются в браузере и не отправляются на сервер. Сайт загружает код и ресурсы для работы инструментов. Без аккаунтов и трекеров.

Нажмите «Скачать», чтобы сохранить инструмент одним HTML-файлом для работы офлайн.

Конфиденциальность →

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

Выберите фигуру и мгновенно обрежьте превью-блок соответствующим правилом clip-path, затем скопируйте готовый CSS. Превью обновляется в реальном времени, полностью в вашем браузере.

Часто задаваемые вопросы

Как работают полигональные clip-path?
Каждая точка — это пара процентов x y относительно блока; браузер соединяет их по порядку и показывает только область внутри контура.
Поддерживают ли clip-path все браузеры?
Фигуры polygon, circle, ellipse и inset поддерживаются во всех современных браузерах, поэтому сгенерированный CSS работает без префиксов.

Больше инструментов