CSS clip-path

Clip elements to custom shapes circles, polygons, and ellipses using clip-path for creative section dividers and image masks.

Overview

`clip-path` clips an element to a defined shape. Only the parts inside the clip region are visible; everything outside is transparent. Clip shape functions: - `circle(radius at cx cy)` circular clip - `ellipse(rx ry at cx cy)` elliptical clip - `polygon(x1 y1, x2 y2, ...)` custom polygon - `inset(top right bottom left round radius)` inset rectangle - `path()` SVG path syntax for complex curves clip-path is powerful for: - Diagonal section dividers instead of horizontal lines - Hexagon or rhombus image frames - Animated reveal effects (clip from 0% to 100%) - Creative hero section shapes clip-path can be **animated and transitioned** as long as both states use the same clip function with the same number of points.

Key Points

•clip-path: circle(50%) creates a circle the classic avatar mask
•clip-path: polygon() points use x y coordinates in px or %
•Polygons must be convex or concave but must form a closed shape
•clip-path clips content box-shadow and outline outside the clip are invisible
•clip-path can be transitioned between same-type shapes with same point count
•Use a clip-path generator tool (like bennettfeely.com/clippy) to design shapes visually
•clip-path: inset(0 0 30% 0) clips the bottom 30% off an element

Examples

Diagonal section divider using polygon

.hero-section {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 80px 40px 120px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Matching bottom section starts at a slight angle */
.next-section {
  margin-top: -40px;
  padding-top: 60px;
}

The polygon clips the bottom-right corner, creating a diagonal cut. Negative margin on the next section hides the resulting gap.

Animated clip-path reveal on hover

.reveal-card img {
  clip-path: inset(0 100% 0 0); /* starts fully clipped (hidden) */
  transition: clip-path 0.6s ease;
}

.reveal-card:hover img {
  clip-path: inset(0 0% 0 0); /* expands to full width */
}

inset(0 100% 0 0) means: inset 0 from top, 100% from right, 0 from bottom, 0 from left fully hidden. Animating to inset(0 0% 0 0) reveals the image from left to right.

Hexagon image frame

.hexagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(
    50% 0%,    /* top center */
    100% 25%,  /* top right */
    100% 75%,  /* bottom right */
    50% 100%,  /* bottom center */
    0% 75%,    /* bottom left */
    0% 25%     /* top left */
  );
}

Six-point polygon creates a hexagon. Coordinates are percentages relative to the element's width and height.

Common Mistakes

Expecting box-shadow to work outside clip-path the shadow is clipped too; use filter: drop-shadow() instead
Trying to transition between polygon() shapes with different point counts they must have the same number of vertices
Using clip-path on text and finding it hard to click clipped areas are not interactive; use overflow: hidden for text

Note

Use bennettfeely.com/clippy to design clip-path shapes interactively. It lets you drag points visually and copies the CSS clip-path value directly.

CSS clip-path

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does "clip-path: circle(50%)" do?