CSS Clip-Path: Creating Creative Shapes for Modern Web Design

The web has moved far beyond rectangular boxes. With the CSS clip-path property, you can clip elements into circles, triangles, stars, diagonal sections, and virtually any shape you can imagine — all with pure CSS. No images, no SVG files, no JavaScript required.

In this guide, we'll explore every aspect of clip-path: the basic shape functions, polygon coordinates, SVG path syntax, animations, and real-world design patterns you can use in your projects today.

What Is clip-path?

The clip-path CSS property creates a clipping region that defines which parts of an element are visible. Anything outside the clipping region is hidden. Think of it like a cookie cutter — the shape you define determines what part of the element shows through.

/* Basic syntax */
.element {
  clip-path: <shape-function> | <url> | none;
}

The property accepts several types of values: basic shape functions (circle(), ellipse(), inset(), polygon()), SVG path references, and the path() function. Let's explore each one.

Basic Shape Functions

circle()

The simplest clip-path shape. It takes a radius and an optional position. This is perfect for avatar images, decorative elements, and circular reveals.

/* Circle at center, 50% radius */
.avatar {
  clip-path: circle(50%);
}

/* Circle with custom position */
.spotlight {
  clip-path: circle(40% at 30% 50%);
}

/* Fixed-size circle */
.dot {
  clip-path: circle(100px at center);
}

The radius can be a length (px, rem) or a percentage. The position defaults to center but can be set to any point using the at keyword followed by x and y coordinates.

ellipse()

Like circle() but with separate horizontal and vertical radii. Great for oval shapes and stretched decorative elements.

/* Horizontal oval */
.banner {
  clip-path: ellipse(60% 40% at 50% 50%);
}

/* Tall narrow ellipse */
.sidebar-accent {
  clip-path: ellipse(30% 70% at center);
}

inset()

Creates a rectangular clip with optional rounded corners. The values work like margin/padding shorthand — top, right, bottom, left.

/* Inset 20px from all edges */
.card {
  clip-path: inset(20px);
}

/* Different insets per side */
.panel {
  clip-path: inset(10px 20px 30px 40px);
}

/* Rounded rectangle */
.badge {
  clip-path: inset(5% round 15px);
}

The round keyword followed by a border-radius value is what makes inset() particularly useful — you can create rounded rectangles that clip the content, not just visually round the corners.

polygon()

This is where clip-path really shines. The polygon() function takes a comma-separated list of coordinate pairs, each representing a vertex of the shape. Coordinates are percentages or lengths relative to the element's bounding box.

/* Triangle pointing up */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

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

/* Pentagon */
.pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

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

/* 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%
  );
}

The coordinate system starts at the top-left corner (0% 0%) and extends to the bottom-right (100% 100%). Each pair of values represents an x,y point, and the browser draws straight lines between consecutive points to form the shape.

Diagonal Sections and Slanted Layouts

One of the most popular uses of clip-path is creating diagonal or angled section dividers. Instead of flat horizontal transitions between sections, you can create dynamic, modern layouts.

/* Angled section - slants down-right */
.hero-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Arrow pointing right */
.arrow-section {
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

/* Chevron divider */
.chevron {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

These work beautifully for hero sections, testimonial blocks, and any place where you want to break the monotony of straight horizontal edges. Apply a background color or image to the section, and the clip-path handles the rest.

Using SVG path() for Complex Shapes

For shapes that go beyond straight-line polygons — curves, waves, organic blobs — you can use the path() function with SVG path data.

/* Wavy bottom edge */
.wave-section {
  clip-path: path('M0,0 L1440,0 L1440,280 Q1080,360 720,280 Q360,200 0,280 Z');
}

/* Blob shape */
.blob {
  clip-path: path('M120,0 C180,0 240,60 240,120 C240,180 180,240 120,240 C60,240 0,180 0,120 C0,60 60,0 120,0');
}

Note that path() uses absolute pixel values, not percentages. For responsive designs, you may need to combine it with transform: scale() or use an inline SVG <clipPath> element with clipPathUnits="objectBoundingBox".

Animating clip-path

One of the most exciting features of clip-path is that it's animatable. You can create stunning reveal effects, morphing shapes, and interactive hover states.

/* Hover reveal: circle expands */
.card-image {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s ease-out;
}

.card:hover .card-image {
  clip-path: circle(75% at 50% 50%);
}

/* Shape morph on hover */
.morph {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: clip-path 0.4s ease;
}

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

Important: When animating between polygon shapes, both states must have the same number of points. The browser interpolates between corresponding points — if the point count doesn't match, the animation won't work.

/* This WON'T animate — different point counts */
.broken {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);        /* 3 points */
  transition: clip-path 0.5s;
}
.broken:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* 4 points */
}

/* Fix: add a duplicate point to the triangle */
.fixed {
  clip-path: polygon(50% 0%, 50% 0%, 0% 100%, 100% 100%); /* 4 points */
  transition: clip-path 0.5s;
}
.fixed:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);  /* 4 points */
}

Real-World Design Patterns

Circular Avatar with clip-path

.avatar {
  width: 120px;
  height: 120px;
  clip-path: circle(50%);
  object-fit: cover;
}

Diagonal Hero Section

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 100px 20px 140px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

Image Gallery with Hexagonal Grid

.hex-item img {
  width: 200px;
  height: 230px;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Notification Badge Arrow

.tooltip {
  position: relative;
  background: #333;
  padding: 8px 12px;
  color: white;
  border-radius: 6px;
}
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 8px;
  background: #333;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

Browser Support and Fallbacks

As of 2026, clip-path has excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge. The basic shape functions and polygon() work everywhere. The path() function has slightly less support in older browser versions but is widely available in current releases.

For graceful degradation, you can use the @supports rule:

/* Fallback: simple border-radius */
.element {
  border-radius: 50%;
  overflow: hidden;
}

/* Enhanced: clip-path if supported */
@supports (clip-path: circle(50%)) {
  .element {
    border-radius: 0;
    clip-path: circle(50%);
  }
}

Performance Considerations

Clip-path is GPU-accelerated in most browsers, making it performant for animations. However, keep these tips in mind:

• Use will-change: clip-path on elements you plan to animate — this hints the browser to optimize rendering.
• Avoid excessive points in polygons — more vertices means more work for the renderer.
• Prefer clip-path over masks for simple shapes — it's generally faster since it doesn't require compositing.
• Test on mobile — complex clip-paths with animations can impact performance on lower-end devices.

Wrapping Up

CSS clip-path is one of the most powerful and underused properties in modern CSS. It lets you break free from rectangular layouts, create eye-catching section dividers, build creative image galleries, and add polished animations — all without leaving your stylesheet. Whether you're crafting a simple circular avatar or an elaborate animated shape morph, clip-path gives you the tools to make it happen.

Start experimenting with our visual Clip-Path Generator to see your shapes come to life in real time.