Генератор CSS clip-path
Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.
Что такое CSS clip-path?
clip-path — это свойство CSS, которое обрезает элемент по базовой фигуре или пути. Всё, что находится за пределами фигуры, скрывается: прямоугольное изображение или блок можно превратить в треугольник, круг, шестиугольник, наклонный баннер или любой многоугольник, не редактируя само изображение.
Какие браузеры поддерживают clip-path?
Все современные браузеры поддерживают базовые функции фигур, используемые этим генератором: polygon(), circle(), ellipse() и inset(). Это Chrome, Edge, Firefox, Safari и Opera. Префикс -webkit-clip-path нужен только для очень старых версий мобильного Safari.
Как работает режим polygon?
В режиме polygon предпросмотр показывает каждую вершину перетаскиваемой точкой. Перетащите точку, чтобы переместить её, двойной клик по пустому месту добавит новую вершину, клик по точке выбирает её, а кнопка удаления убирает выбранную точку. Значение CSS обновляется в реальном времени процентными координатами.
Что означают проценты в polygon()?
Каждая вершина записывается парой X Y в процентах от левого верхнего угла элемента. Поскольку значения относительны размеру элемента, фигура масштабируется вместе с ним и остаётся адаптивной при любой ширине экрана.
В чём разница между circle, ellipse и inset?
circle(радиус at x y) обрезает круг с одним радиусом, ellipse(rx ry at x y) позволяет задать разные горизонтальный и вертикальный радиусы, а inset(верх право низ лево) обрезает прямоугольник, суженный от каждого края. Генератор даёт ползунки и числовые поля для всех параметров.
Влияет ли clip-path на вёрстку и клики?
clip-path влияет только на внешний вид. Элемент сохраняет исходный блок в вёрстке, поэтому ничего вокруг не сдвигается. Однако события указателя, например клики, срабатывают только внутри видимой обрезанной области — это удобно для кнопок нестандартной формы.
Можно ли анимировать clip-path?
Да. Браузеры плавно переходят между двумя значениями clip-path, если совпадают функция фигуры и количество точек: например, от большого inset к меньшему или между двумя полигонами с одинаковым числом вершин. Анимируйте через CSS-свойство transition.
Загружаются ли моё изображение или данные на сервер?
Нет. Изображение предпросмотра — градиент, нарисованный локально на canvas, а все вычисления происходят в вашем браузере. Ничто не отправляется на сервер, поэтому после загрузки страница работает и офлайн.
Где обычно применяют clip-path?
Популярные сценарии: диагональные hero-секции, шестиугольные или круглые маски аватаров, треугольные указатели всплывающих подсказок, креативные фотоколлажи, скошенные углы карточек и кнопки нестандартной формы — без графических редакторов.
Как использовать Генератор CSS clip-path
Придайте форму любому элементу с помощью CSS clip-path вместо редактирования изображений. Выберите функцию формы, потяните за маркеры и скопируйте готовое к продакшену CSS. Всё работает локально в вашем браузере.
- Выберите режим: Многоугольник, Круг, Эллипс или Inset.
- В режиме многоугольника перетаскивайте точки вершин, двойной щелчок по пустому месту добавляет точку, а перед удалением точку нужно выделить.
- В режимах круга, эллипса и Inset подстраивайте каждое значение ползунками или вводите точный процент.
- Следите, как живой предпросмотр обновляется поверх локально сгенерированного градиентного образца.
- Скопируйте однострочное правило clip-path и вставьте его в свою таблицу стилей.
Сохраняйте одинаковое число точек многоугольника между двумя состояниями — тогда форму можно плавно анимировать CSS-переходом.
Похожие инструменты
- Генератор CSS Box Shadow Бесплатный онлайн-генератор CSS box-shadow. Визуально создавайте красивые тени с настраиваемыми смещением, размытием, расширением, цветом и inset. Живой предпросмотр и мгновенное копирование кода.
- Генератор CSS-градиентов Создавайте потрясающие CSS-градиенты визуально. Генерируйте линейные, радиальные и конические градиенты с несколькими цветовыми точками, углами и позициями. Мгновенно копируйте готовый CSS-код.
- Генератор Border Radius Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор CSS easing Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
- Генератор text-shadow CSS Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
- Форматировщик CSS Мгновенно форматируйте и beautify CSS-код. Преобразуйте минифицированный CSS в читаемый код с настраиваемыми параметрами.
- Минификатор CSS Бесплатный онлайн-минификатор CSS. Мгновенно сжимайте и оптимизируйте CSS-код, удаляя пробелы, комментарии и лишние символы. Уменьшайте размер файла для ускорения загрузки сайта.