CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

आकार का प्रकार

त्रिज्या: 40%

केंद्र X: 50%

केंद्र Y: 50%

लाइव प्रीव्यू

जेनरेट किया गया CSS

.element {
  clip-path: circle(40% at 50% 50%);
}

इस टूल के बारे में

CSS Clip-Path Generator चार आकार प्रकारों के लिए clip-path मान बनाता है: circle(), ellipse(), inset() और polygon()।

SVG फ़ाइलों के बिना क्रिएटिव लेआउट, इमेज मास्क और हीरो सेक्शन शेप बनाने में सक्षम। सभी पैरामीटर रियल-टाइम में प्रीव्यू अपडेट करते हैं।

हीरो सेक्शन में विजुअल डिवाइडर के रूप में क्लिप-पाथ का उपयोग। प्रोफाइल इमेज में circle() का उपयोग। होवर इफेक्ट्स में clip-path एनिमेशन।

क्या clip-path क्लिकेबल एरिया को प्रभावित करता है? — हाँ। कटे हुए क्षेत्र क्लिकेबल नहीं होते।
क्या clip-path को एनिमेट किया जा सकता है? — हाँ। समान बिंदुओं वाले दो पॉलीगॉन के बीच ट्रांजिशन किया जा सकता है।
क्या सभी ब्राउज़र clip-path को सपोर्ट करते हैं? — हाँ, सभी आधुनिक ब्राउज़र पूर्ण समर्थन के साथ।