Как пользоваться: Генератор CSS Clip-path
- Выберите стартовую фигуру — полигоны, круг, эллипс или скругленный inset.
- Перетаскивайте точки по изображению. Выделите точку и нажмите + Add point, чтобы добавить новую после нее, или Remove point, чтобы удалить. Чтобы нарисовать свою фигуру, начните с Rectangle.
- Для кругов, эллипсов и inset используйте ползунки на панели.
- Скопируйте CSS и примените его к любому изображению, видео или элементу. Нажмите Use my image, чтобы посмотреть результат на своей картинке.
clip-path вкратце
clip-path скрывает все, что находится за пределами фигуры. Элемент сохраняет свой размер и верстку, меняется только видимая область. Это удобно для главных изображений, аватаров, фигурных секций и эффектов при наведении (значения clip-path с одинаковым количеством точек можно анимировать через transition).
| Функция | Пример |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — треугольник; любое количество точек |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — прямоугольник со скругленными углами, обрезанный от краев |
Проценты отсчитываются от рамки элемента, поэтому фигура масштабируется вместе с ним. Все современные браузеры поддерживают фигуры clip-path; строка -webkit- нужна для старых версий Safari. Чтобы смягчить края вместо обрезки, используйте генератор CSS Mask; для органических форм подойдет генератор SVG-блобов.
Также ищут как: генератор clip-path, css clip-path generator, clip-path polygon, css фигуры для изображений, генератор clip path онлайн, clip-path circle, polygon generator css, обрезка изображений css.
Инструменты, которые хорошо сочетаются с Генератор CSS Clip-path
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор CSS-треугольников — Создайте треугольник на чистом CSS для стрелки подсказки, указателя выпадающего меню или облачка речи: выберите одно из 8 направлений, ширину, высоту и цвет, а затем скопируйте либо классический приём с border, либо более простую версию на clip-path.
- CSS-генератор фильтров — Настройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера или своего изображения и скопируйте CSS-свойство filter.
- Генератор SVG-волн — Создавайте волнистые разделители секций для лендингов: добавляйте и удаляйте волны (до 6, у каждой свой цвет, прозрачность и форма), задавайте количество гребней, высоту и плавность, выбирайте цвета и то, где будет волна: сверху или снизу.
Часто задаваемые вопросы
Как сделать полигональную фигуру в CSS?
Выберите стартовую фигуру, перетащите точки в нужные места и скопируйте строку clip-path: polygon(…). Каждая точка задается парой x% y% относительно элемента.
Как добавить точки к полигону clip-path?
Выделите точку и нажмите + Add point: новая точка появится на полпути до следующей, и ее можно сразу перетащить. Двойной клик по изображению добавляет точку на ближайшем ребре; Remove point удаляет выбранную.
Можно ли анимировать clip-path?
Да, можно использовать transition или animate между двумя значениями clip-path одного типа с одинаковым количеством точек, например两 polygon() с 6 точками каждый.
Работает ли clip-path во всех браузерах?
Базовые фигуры (polygon, circle, ellipse, inset) работают во всех современных браузерах. Для старых версий Safari добавьте строку -webkit-clip-path, которую генерирует инструмент.
Почему при использовании clip-path пропадает тень?
clip-path также обрезает box-shadow. Оберните элемент в родительский блок и примените filter: drop-shadow() к родителю.
Можно ли установить Генератор CSS Clip-path как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS Clip-path — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.