CSS Clip-Path Generator
Визуальный генератор CSS clip-path с интерактивным редактором форм
ПревьюКлик — добавить точку, ПКМ — удалить
Параметры
Точек: 3. Перетаскивайте точки на превью. Кликните на пустое место, чтобы добавить точку. Правый клик по точке — удалить.
CSS код
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Пресеты
О сервисе CSS Clip-Path Generator
CSS Clip-Path Generator — интерактивный редактор для создания обтравочных масок. Выберите режим (polygon, circle, ellipse, inset), настройте точки визуально или выберите готовый пресет — получите CSS clip-path для копирования.
Часто задаваемые вопросы
clip-path задаёт видимую область элемента, обрезая всё за пределами фигуры. Позволяет создавать нестандартные формы без PNG-масок: скошенные секции, круговые аватарки, декоративные блоки. Работает с любым HTML-элементом и изображениями.
Четыре базовые функции: circle() — круг, ellipse() — эллипс, inset() — прямоугольник с отступами и скруглением, polygon() — произвольный многоугольник. Также поддерживается path() для SVG-путей и url() для ссылки на SVG clipPath.
clip-path анимируется через transition и @keyframes, если начальная и конечная формы используют одну функцию с одинаковым числом точек. Например, polygon с 4 точками можно плавно трансформировать в другой polygon с 4 точками. Для сложных переходов используйте GSAP или Web Animations API.
clip-path скрывает пиксели визуально, но элемент сохраняет свои размеры в потоке документа. Клики за пределами обрезки по умолчанию всё ещё срабатывают. Добавьте pointer-events: none к обрезанным областям, если нужно ограничить интерактивность.
Базовые фигуры (circle, ellipse, inset, polygon) поддерживаются во всех современных браузерах. Для Safari и старых версий Chrome добавляйте -webkit-clip-path. Функция path() имеет ограниченную поддержку — проверяйте Can I Use для вашей целевой аудитории.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker