Генератор CSS-фильтров clip-path

CSS Clip-Path Generator — это визуальный инструмент для создания и тестирования свойств CSS clip-path. Clip-path позволяет обрезать элементы до базовых форм (круг, эллипс, многоугольник) или SVG-пути. Этот инструмент предоставляет предварительный просмотр в реальном времени и генерацию кода для создания пользовательских форм для ваших веб-проектов.

Нажмите на любую кнопку готовой формы на панели Presets, чтобы мгновенно применить её. Инструмент включает 12 встроенных форм: треугольник, трапеция, параллелограмм, пятиугольник, шестиугольник, семиугольник, восьмиугольник, звезда, круг, эллипс, внутренняя рамка и скругленный внутренний прямоугольник. Предварительный просмотр обновляется немедленно, чтобы показать, как форма обрезает элемент.

Введите любое допустимое значение clip-path в поле Custom Path. Поддерживаются все функции clip-path: polygon(), circle(), ellipse(), inset() и path(). Инструмент отображает сгенерированный CSS-код со стандартным префиксом и префиксом -webkit- для максимальной совместимости с браузерами. Нажмите кнопку Copy, чтобы скопировать код в буфер обмена.

Конструктор многоугольников предоставляет визуальный интерфейс для создания пользовательских форм многоугольников. Каждая точка определяется координатами X и Y (0-100%). Добавьте больше точек (минимум 3), чтобы создать сложные многоугольники, или удалите точки для упрощения. Конструктор автоматически генерирует допустимый синтаксис CSS polygon() при изменении координат.

Настройте предварительный просмотр, регулируя ползунок Size (100-400px) и используя средство выбора цветов для изменения цвета фона элемента. Эти настройки помогут вам визуализировать, как clip-path будет выглядеть с разными размерами и цветами элементов в вашем дизайне.

CSS clip-path поддерживается во всех современных браузерах. Инструмент автоматически включает -webkit-clip-path для совместимости с Safari. Обратите внимание, что clip-path с функцией path() имеет ограниченную поддержку в старых браузерах. Всегда тестируйте целевые браузеры перед развертыванием в продакшене.