CSS clip-path generator ऐसी clip-path values create करता है जो element को polygon, circle, ellipse या custom shape में crop करते हैं। Modern landing pages slanted hero sections, hexagonal avatars, arrow-shaped buttons इसी से बनाते हैं — Photoshop masks export किए बिना।
इस गाइड में हर clip-path function, browser support, और clipped shapes animate करना cover करेंगे।
Clip-Path CSS Generate करें — Free
Polygons, circles, ellipses live preview के साथ।
Clip-Path Functions
| Function | Use For |
|---|---|
| polygon() | Custom shape via x/y points |
| circle() | Circular crop |
| ellipse() | Oval shapes |
| inset() | Rectangular crop |
| path() | SVG-style curves |
Common Recipes
Diagonal Hero
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);Hexagon
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);Circle
clip-path: circle(50% at 50% 50%);Rounded Inset
clip-path: inset(10px round 12px);Clip-Path Animate करना
Reveal effects के लिए clip-path transition/animate कर सकते हैं। Trick: दोनों states में same number of points होने चाहिए।
.box {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.box:hover {
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}Browser Support
- Chrome, Edge, Safari, Firefox — polygon, circle, ellipse, inset full support।
- path() — 2022 से modern browsers में।
- IE11 — supported नहीं। SVG masks fallback use करें।
Gotchas
- Clipped area still laid out होता है — text wrapping के लिए shape-outside use करें।
- Click events invisible portion पर भी fire होते हैं।
- Box-shadow भी clip हो जाता है — parent element पर apply करें।
How to Use the Tool (Step by Step)
- 1
Shape Type Pick करें
Polygon, circle, ellipse, inset।
- 2
Points Adjust करें
Handles drag या sliders।
- 3
Live Preview
Update देखें।
- 4
CSS Copy करें
Generated rule।
- 5
Apply करें
Element पर paste।
Frequently Asked Questions
क्या clip-path images पर काम करता है?+−
हाँ — किसी भी element पर, <img> भी।
Different polygons के बीच animate कर सकते हैं?+−
हाँ — same number of points required।
Clipped element clicks receive करता है?+−
हाँ — clip-path visual only है।
Clip-path vs mask?+−
clip-path sharp boundaries; mask soft alpha-based।
Percentages use कर सकते हैं?+−
हाँ — element size के साथ scale करते हैं।
Clip-Path CSS Generate करें — Free
Polygons, circles, ellipses live preview के साथ।
Clip-Path Generator खोलें ->Related Guides
CSS Gradient Generator — Beautiful Gradients Code (2026)
Linear, radial, conic gradient visually design। CSS code copy।
CSS Animation Generator Guide
Visual editor से CSS keyframe animations build करें — timing, easing, transforms set करें, real-time preview देखें।
CSS Flexbox Generator Guide
Flexbox layouts visually build करें — direction, alignment, wrapping और gaps adjust करें।