CSS clip-path: how to create shaped masks for elements

clip-path is a CSS property that lets you clip an element to an arbitrary shape. Unlike border-radius, which only rounds corners, clip-path creates any geometric or polygonal mask: triangles, hexagons, waves, and organic shapes. It is a powerful tool for modern web design, from decorative cards to animated transitions and creative galleries.

For visual mask editing, use the reChecker clip-path generator.

clip-path syntax

The property accepts several types of values: basic geometric shapes and polygons defined by coordinates.

polygon()

Defines a mask in the shape of a polygon. Coordinates are specified in percentages or pixels relative to the element. The first point is automatically connected to the last.

/* Треугольник */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

/* Шестиугольник */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

/* Скошенная карточка */
clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);

Coordinates are specified in pairs: x y. The origin is the element’s top-left corner. 0% 0% is the top-left, and 100% 100% is the bottom-right.

circle()

A circular mask. Syntax: circle(radius at x y).

/* Круг по центру, радиус 50% */
clip-path: circle(50% at 50% 50%);

/* Круг в правом нижнем углу */
clip-path: circle(30% at 100% 100%);

/* Фиксированный радиус в пикселях */
clip-path: circle(80px at center center);

The default position is center. A radius specified as a percentage is calculated from the element’s diagonal (according to the sqrt(width² + height²) / sqrt(2) specification).

ellipse()

An elliptical mask. Syntax: ellipse(rx ry at x y).

/* Эллипс по центру */
clip-path: ellipse(50% 30% at 50% 50%);

/* Горизонтальный овал */
clip-path: ellipse(60% 25% at center center);

inset()

A rectangular mask with rounded corners. Syntax: inset(top right bottom left round radius).

/* Прямоугольник с отступами */
clip-path: inset(10% 20% 10% 20%);

/* С скруглением */
clip-path: inset(10% 10% 10% 10% round 20px);

Values follow the same order as margin: clockwise, starting at the top.

Practical examples

Card with a diagonal cut

.card {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Wavy bottom edge

.wave {
  clip-path: polygon(
    0 0, 100% 0, 100% 70%,
    80% 85%, 60% 70%, 40% 85%, 20% 70%, 0 85%
  );
}

Diamond-shaped avatar

.avatar-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Notch cutout for a logo

.notch {
  clip-path: polygon(
    0 0, 20% 0, 20% 20%, 80% 20%, 80% 0, 100% 0,
    100% 100%, 0 100%
  );
}

Stars and polygons

Polygon is ideal for decorative elements such as stars and hexagons. Coordinates can be calculated from the center or adjusted visually. For example, a five-pointed star requires 10 points (5 outer and 5 inner). For these shapes, the reChecker clip-path generator can significantly speed up the work.

Cropping images to fit the content

Images in galleries or cards are often cropped into unconventional shapes. Applying clip-path to img or a wrapper creates a consistent visual style without requiring additional images in an editor.

Animations with clip-path

clip-path can be animated using transition and animation. This makes it possible to create smooth shape morphs and creative transitions.

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}

.card:hover {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}

Morphing between different polygons:

@keyframes morph {
  0%   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
}

.shape {
  animation: morph 4s ease-in-out infinite;
}

Important: The number of points in a polygon must match during animation; otherwise, the transition will not work correctly.

Browser support

clip-path is supported in all modern browsers (Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+). Older versions of Safari may require the -webkit-clip-path prefix. The property is not supported in IE; use @supports as a fallback:

.card {
  border-radius: 12px; /* fallback */
}

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .card {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
}

Performance

clip-path is handled by the compositing layer. For animated elements, the browser creates a separate layer, which is usually efficient. Recommendations:

• Avoid animating clip-path on many elements at once (dozens or hundreds)
• Prefer polygon with a small number of points; complex paths are more expensive to render
• Use will-change: clip-path only when necessary and remove it after the animation

The reChecker clip-path tool

The reChecker clip-path generator lets you:

• Create visually polygons, circles, ellipses, and insets
• Edit coordinates with a live preview
• Copy ready-to-use CSS with one click
• Experiment with shapes without calculating coordinates manually

It’s useful for rapid prototyping and finding shapes that fit a design. The result updates instantly when values change. You can enter polygon coordinates manually or drag points in the visual editor, saving time when creating complex shapes.

clip-path vs. other methods

For most decorative shapes, clip-path is the optimal choice: native CSS, good performance, and simple animation. If needed, combine it with border-radius and overflow: hidden; they work independently and can complement each other in different scenarios.

Using with SVG

clip-path can reference an SVG element clipPath using url(). This lets you use complex paths from vector graphics:

.clipped {
  clip-path: url(#myClipPath);
}

In SVG, an element <clipPath id="myClipPath"> containing paths is defined. This approach is suitable for very complex shapes imported from design tools.

Recommendations

1. Accessibility — clipped content remains in the DOM; make sure important text is not clipped on small screens
2. Contrast — shaped edges can overlap the background; check readability
3. overflow — clip-path clips content visually; overflow: hidden on a parent element can also hide shadows and pseudo-elements
4. Interactivity — in modern browsers, the clickable area matches the visible shape

FAQ

What is the difference between clip-path and overflow: hidden?

overflow: hidden clips content to the element’s rectangular bounds (taking border-radius into account). clip-path defines an arbitrary shape, such as a triangle, circle, or polygon. clip-path does not affect layout or create scrolling.

Can clip-path be animated?

Yes. clip-path can be animated using transition and @keyframes. When morphing polygons, the number of points must match in the initial and final states.

Is clip-path supported in older browsers?

Modern browsers (Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+) support clip-path. IE does not. Safari sometimes requires the -webkit-clip-path prefix. Use @supports as a fallback.

How do I create a wavy edge with clip-path?

Use polygon() with a series of points along the bottom edge. For example: polygon(0 0, 100% 0, 100% 70%, 80% 85%, 60% 70%, 40% 85%, 20% 70%, 0 85%). Change the coordinates to create different waves. The reChecker clip-path generator helps you adjust the shape visually.

Which tool should I use to create a clip-path?

The reChecker clip-path generator is a free online tool for visually creating masks. It supports polygon, circle, ellipse, and inset, with a live preview and CSS export. It is suitable for designers and developers.