All Tools / Blog / CSS Clip Path: Complete Guide to Creating Shapes with CSS

CSS Clip Path: Complete Guide to Creating Shapes with CSS

Published: May 26, 2026

What Is CSS Clip-Path?

The clip-path CSS property lets you clip an element to a basic shape or a custom SVG path. Instead of showing the full rectangular box of an element, you define a visible region — everything outside is hidden. It's like having a cookie cutter for your HTML elements: place any shape over an image, a div, or even a video, and only the cut-out portion is visible.

This is enormously useful for creating modern UI designs — circular profile photos, hexagonal image galleries, skewed section dividers, decorative backgrounds, and more — all without uploading a single specially-cropped image.

Browser Support

clip-path is widely supported across all modern browsers. Chrome, Firefox, Safari, and Edge all support the basic shape functions. For the circle(), ellipse(), inset(), and polygon() functions, you're safe to use them in production. The path() function and complex SVG references have slightly narrower support — always check caniuse.com if you're targeting older browsers.

The Four Core Shape Functions

1. circle()

Creates a circular clip. The syntax is circle(radius at position). The radius defaults to 50% (the largest circle that fits the element), and the position defaults to center.

/* Perfect circle — great for profile photos */
.avatar {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Offset circle */
.badge {
  clip-path: circle(40% at 30% 50%);
}

2. ellipse()

Creates an elliptical (oval) clip. The syntax is ellipse(rx ry at position) where rx is the horizontal radius and ry is the vertical radius.

/* Stretched ellipse */
.hero-image {
  clip-path: ellipse(60% 40% at center);
}

/* Egg-shaped cutout positioned top-left */
.decoration {
  clip-path: ellipse(30% 50% at 20% 20%);
}

3. inset()

Cuts a rectangle from the inside, optionally with rounded corners. The syntax is inset(top right bottom left round radius). This is great for creating "rounded card" effects without border-radius.

/* Rounded card with 20px inset from each edge */
.card {
  clip-path: inset(10px 20px 10px 20px round 16px);
}

/* Diamond-like perspective crop */
.perspective-box {
  clip-path: inset(10% 5% round 8px);
}

4. polygon()

The most flexible function. You define a list of coordinate pairs (x y, x y, ...) and the browser connects them to form your shape. Coordinates can be percentages or lengths.

/* Triangle pointing up */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #3b82f6;
  height: 200px;
  width: 200px;
}

/* Regular hexagon */
.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Five-point star */
.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

/* Diagonal split (angled section divider) */
.section-divider {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Common Shapes Reference

Here are a few reusable polygon recipes:

Animating and Transitioning Clip-Path

One of the most powerful features of clip-path is that it animates smoothly. When you change the shape in a CSS transition or animation, the browser interpolates between the two polygon point sets. The catch: both shapes must have the same number of points for a smooth morph.

/* Morph a circle into a star on hover */
.morph-element {
  clip-path: circle(50%);
  transition: clip-path 0.5s ease;
}

.morph-element:hover {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

For polygon-to-polygon transitions, ensure the point count matches. If you want to animate from a rectangle to a polygon, you can simulate a rectangle with four polygon points: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) — then transition to a 4-point shape like a diamond.

Combining Clip-Path with Filters and Effects

Clip-path plays beautifully with other CSS properties. Layer it with filter, box-shadow, and transform for stunning visuals:

/* Hexagon image with hover effect */
.hex-image {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transition: all 0.4s ease;
  filter: grayscale(60%);
  width: 250px;
  height: 280px;
  object-fit: cover;
}

.hex-image:hover {
  filter: grayscale(0%) drop-shadow(0 8px 16px rgba(0,0,0,0.3));
  transform: scale(1.05);
}

You can also stack multiple clipped elements to create complex compositions — a clipped background with a clipped foreground image, for instance — to build page sections that look like they were designed in Figma.

Try It Visually

Writing polygon coordinates by hand is powerful but tedious. It's hard to visualize how polygon(45% 5%, ...) maps to a real shape until you see it. That's where a visual tool comes in.

Use the CSS clip-path generator from Wang Toolbox to experiment with all four shape functions in real time. Drag the control points, watch the shape update instantly, and copy the generated CSS code with one click. It's the fastest way to nail the perfect shape for your project.

Whether you're designing a profile page, building a hero section with diagonal dividers, or creating interactive hover effects, the CSS clip-path generator helps you iterate visually without the guesswork of manual coordinate math.

Final Thoughts

clip-path is one of those CSS properties that unlocks a whole new level of design freedom. Once you get comfortable with polygon() and understand how points map to percentage coordinates, you can create virtually any shape — triangles, stars, hexagons, flags, ribbons, custom SVG-shaped cutouts — all in pure CSS.

The key takeaways: always verify browser support for your target audience; use transition for smooth morphing (matching point count); and leverage a visual generator to speed up your workflow. Give it a try on your next project — you'll wonder why you didn't use it sooner.