📌 What Is clip-path?

The clip-path property allows you to visually clip (cut) an element into a specific shape — such as a circle, polygon, star, or any custom path.
It hides everything outside the defined shape, creating powerful UI design possibilities like diagonal sections, avatars, creative buttons, loaders, and hero banners. 🎨✨

🧩 Basic Syntax

clip-path: <basic-shape> | path() | url(#svgClipPath);

clip-path: circle(50%);
clip-path: inset(10px);
clip-path: polygon(...);
clip-path: path('M0 0 L100 0 L50 100 Z');

✔ Supports CSS shapes
✔ Supports SVG paths
✔ Supports SVG clipPath via URL

🎯 Types of clip-path Shapes

🧪 Example: Circle Clip

.avatar {
  clip-path: circle(50%);
}

✔ Perfect for profile pictures or round buttons.

🧪 Example: Ellipse Clip

.banner {
  clip-path: ellipse(60% 40% at center);
}

✔ Creates smooth, curved hero sections.

🧪 Example: Polygon Clip (Triangle)

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

✔ Often used for ribbons, badges, and design accents.

🧪 Example: Diagonal Section

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

✔ A modern design trend for sections and hero headers.

🧪 Example: Using inset()

.crop {
  clip-path: inset(20px 40px 20px 40px);
}

✔ Clips equally from each side — useful for cropping edges.

🔥 Advanced: Using path() for Complex Shapes

.blob {
  clip-path: path("M10,80 Q95,10 180,80 T350,80");
}

✔ Enables organic shapes, blobs, waves
✔ Works similarly to SVG path drawing

🧪 SVG clipPath Usage

<svg width="0" height="0">
  <clipPath id="clipStar" clipPathUnits="objectBoundingBox">
    <polygon points="0.5 0, 0.6 0.35, 1 0.35, 0.7 0.57, 0.82 1, 0.5 0.72, 0.18 1, 0.3 0.57, 0 0.35, 0.4 0.35"/>
  </clipPath>
</svg>

<div class="star"></div>

.star {
  clip-path: url(#clipStar);
}

✔ Gives ultimate flexibility with vector shapes.

🎨 Clip Path + Hover Animation

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

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

✔ Smooth animated transitions between shapes.

🌈 Clip Path + Scroll Animation

@keyframes reveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0); }
}

.reveal {
  animation: reveal 1s ease forwards;
}

✔ Creates a clean “wipe-in” effect.

🛠️ Tools to Generate Clip Paths

⚠️ Browser Support

🔍 Debugging Tips

🔗 Helpful Resources