chevron_right

Генератор CSS Clip-Path

Создавайте CSS clip-path фигуры с живым предпросмотром.

Фигура

CircleEllipseInsetTriangleHexagonDiamondPentagonStarArrow

Параметры

Radius: 50

Center X: 50

Center Y: 50

Сгенерированный CSS

clip-path: circle(50% at 50% 50%);

Похожие инструменты

Генератор CSS Keyframes

Создавайте пользовательские CSS keyframes визуально, с живым предпросмотром и готовым кодом для копирования.

Генератор CSS Grid

Создавайте адаптивные CSS Grid-макеты с живым предпросмотром и готовым кодом.

Генератор CSS-анимаций

Создавайте переиспользуемые CSS-анимации с живым предпросмотром движения и готовыми keyframes.

Генератор Box Shadow

Создавайте CSS-тени визуально с живым предпросмотром.

Сжать PDF

Уменьшите размер PDF-документа без загрузки на сервер.

Форматировщик YAML

Форматируйте и улучшайте читаемость YAML с настраиваемыми отступами и сортировкой ключей.

Минификатор CSS

Сжимайте CSS, удаляя пробелы, комментарии и лишние правила.

apps

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

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

Формируйте силуэт элементов визуально, а не расставляя точки вручную

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

Когда это особенно полезно

Он хорошо подходит для масок изображений, нестандартных карточек и декоративных краев секций. Перед использованием стоит проверить, как форма ведет себя с текстом, изображениями и на разных размерах экрана.