Реклама мешает? Идти Без рекламы Сегодня 

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

ЦветРазработчик

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

Shape Type

Форма

Предустановки

Предустановленный

Circle Settings

Radius %: 50

Center X %: 50

Center Y %: 50

Ellipse Settings

Radius X %: 50

Radius Y %: 40

Center X %: 50

Center Y %: 50

Inset Settings

Top %: 10

Right %: 10

Bottom %: 10

Left %: 10

Border Radius %: 0

Параметры

Snap to Grid (5% increments)

Show Grid

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

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

Visually create CSS clip-path shapes with an intuitive drag-and-drop editor. Build polygons, circles, ellipses, and inset shapes, then copy the generated CSS directly into your stylesheets.

Как использовать

Select a shape type or start from a preset template. Drag control points to adjust the shape visually on the preview canvas. The CSS clip-path code updates in real-time as you edit. When you are happy with the result, copy the generated CSS code or export as SVG.

Функции

Visual drag-and-drop editor – Create shapes by moving control points directly on the canvas
Multiple shape types – Polygon, circle, ellipse, and inset
Preset templates – Start from common shapes like triangles, stars, arrows, and more
Undo and redo – Full history support for non-destructive editing
Snap to grid – Precise point placement with configurable grid snapping
SVG export – Download your shape as an SVG file
Live CSS output – Copy the generated clip-path property instantly

РЕКЛАМА · УДАЛЯТЬ?

 Часто задаваемые вопросы

What is a CSS clip-path and how does it work?

CSS clip-path defines a clipping region that determines which parts of an element are visible. Anything outside the clip-path shape is hidden. It supports basic shapes (circle, ellipse, inset, polygon) and SVG path definitions. Unlike overflow:hidden which only clips to rectangular bounds, clip-path can create complex non-rectangular visible areas for creative layouts and visual effects.
What is the difference between clip-path and mask in CSS?

Clip-path creates a hard edge — pixels are either fully visible or fully hidden based on whether they fall inside the defined shape. CSS mask uses an image or gradient to control transparency, allowing soft edges and partial transparency. Clip-path is simpler and more performant for geometric shapes, while masks offer more artistic control with gradients and alpha channels.
How do CSS polygon coordinates work?

Polygon coordinates in clip-path use percentage or length values relative to the element's bounding box. Each point is defined as an x,y pair where 0% 0% is the top-left corner and 100% 100% is the bottom-right. Points are connected in order to form the shape. For example, polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle. The shape automatically closes by connecting the last point back to the first.