CSSclip-pathShapesAnimations

CSS clip-path: Create Custom Shapes, Reveals & Clipping Masks

CSS clip-path lets you cut any shape from an element — polygons, circles, ellipses, and SVG paths. Learn how to use it for hero sections, image masks, and animated shape reveals.

U

UIXplor Team

February 25, 2026 · 6 min read

✦

01clip-path Basics

`clip-path` masks the visible area of an element. Everything outside the clip path is invisible:

css
/* Circle */
.circle { clip-path: circle(50%); }

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

/* Inset (rounded rectangle) */
.rounded { clip-path: inset(10px 20px 10px 20px round 12px); }

02Polygon Shapes

Polygons take a list of x/y coordinate pairs:

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

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

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

03Animated Reveal with clip-path

css
.reveal {
  clip-path: inset(0 100% 0 0); /* hidden — clipped from right */
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  clip-path: inset(0 0% 0 0); /* fully visible */
}

Triggered with IntersectionObserver, this creates an elegant text/image reveal without opacity or transform.

Related UI Components

◈

Collections

All UI component collections

✨

Animations

CSS & Tailwind animation library

Back to Blog