What is CSS clip-path?
The CSS clip-path property lets you clip any HTML element to a custom shape — circles, polygons, stars, arrows, and complex paths. It's the secret behind creative image masks, section dividers, and non-rectangular layouts.
🖱️ Visual Drag & Drop
Move points visually to create any shape. See the clip-path update in real-time as you drag handles.
⭐ Pre-built Shapes
Start with 30+ complex shapes — stars, arrows, speech bubbles, frames, crosses, and geometric forms.
📋 One-Click Code Copy
Copy CSS clip-path or SVG path code with a single click. Edit directly in CodePen for quick testing.
What Can You Create with clip-path?
🖼️ Image Masks
Clip images into circles, hexagons, or custom shapes. Perfect for profile pictures, portfolio galleries, and hero sections.
📐 Section Dividers
Create angled, curved, or zigzag section dividers between page sections. Much cleaner than background images.
🎨 Creative Layouts
Build non-rectangular card designs, overlapping sections, and unique UI elements that stand out.
💬 Speech Bubbles & Badges
Create chat bubbles, badges, ribbons, and decorative elements using pure CSS — no images needed.
clip-path CSS Examples
Circle
clip-path: circle(50% at 50% 50%);Triangle
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Star
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);Arrow
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
