Cubic Bezier जेनरेटर
नयाकंट्रोल पॉइंट खींचकर CSS easing curve डिज़ाइन करें — लाइव प्रीव्यू के साथ।
Runs entirely in your browser. Nothing is uploaded.
CSS easing कर्व को विज़ुअली डिज़ाइन करें
यह cubic-bezier जनरेटर अमूर्त cubic-bezier(x1, y1, x2, y2) वैल्यू को कुछ ऐसा बना देता है जिसे आप देख और महसूस कर सकते हैं। ग्राफ पर दो कंट्रोल-पॉइंट हैंडल खींचें, एक्सेलरेशन कर्व बनाएं, लाइव प्रीव्यू देखें जो उसी टाइमिंग के साथ चलता है, और फिर अपने CSS ट्रांज़िशन और एनिमेशन के लिए रेडी-टू-यूज़ वैल्यू कॉपी करें। यह एक पूर्ण easing कर्व एडिटर और cubic-bezier विज़ुअलाइज़र है — कोई इंस्टॉल नहीं, कोई अकाउंट नहीं, सब कुछ ब्राउज़र में।
हर कर्व (0,0) से (1,1) तक जाती है। क्षैतिज अक्ष समय है और ऊर्ध्वाधर अक्ष प्रगति — इसलिए शुरुआत में तेज उठने वाली कर्व का मतलब तेज शुरुआत है, और अंत के पास चपटी होने वाली का मतलब सहज अंत। चारों इनपुट में सटीक नंबर टाइप करें, हैंडल खींचें, या मौजूदा cubic-bezier() वैल्यू पेस्ट करके लोड करें। हर हैंडल मूवमेंट के साथ रिज़ल्ट रियल टाइम में अपडेट होता है।
30+ प्रीसेट: CSS कीवर्ड और नामांकित easing कर्व
प्रीसेट बार वो दो चीज़ें एक साथ देता है जो प्रतिस्पर्धी अलग रखते हैं। आपको पाँच CSS कीवर्ड मिलते हैं — linear, ease, ease-in, ease-out और ease-in-out — साथ ही easings.net से लोकप्रिय नामांकित easing कर्व का पूरा कैटलॉग: Sine, Quad, Cubic, Quart, Quint, Expo, Circ और Back, हर एक In, Out और In-Out वेरिएंट में। इसका मतलब है easeInOutCubic, easeOutQuart, easeOutBack और बाकी सब एक क्लिक दूर हैं, पहले से css cubic-bezier वैल्यू में बदले हुए।
हर प्रीसेट एक छोटा कर्व थंबनेल दिखाता है ताकि आप एक नज़र में उसका आकार पहचान सकें, फिर वह सीधे एडिटर में लोड हो जाता है जहाँ आप उसे रिफाइन कर सकते हैं। Easings.net केवल नाम सूचीबद्ध करता है और स्थिर चित्र दिखाता है — वहाँ से एडिट या एक्सपोर्ट नहीं किया जा सकता। cubic-bezier.com पाँच CSS कीवर्ड दिखाता है लेकिन पूरा Penner सेट नहीं। यह टूल दोनों देता है, एडिटिंग के साथ, एक ही जगह।
Overshoot, बाउंस और एंटिसिपेशन
Cubic-bezier के y वैल्यू 0–1 तक सीमित नहीं हैं। एक हैंडल को बॉक्स के ऊपर धकेलें और एनिमेशन सेटल होने से पहले अपने लक्ष्य को पार कर जाती है — easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1) की स्प्रिंगी फीलिंग। हैंडल को बॉक्स के नीचे खींचें और एलिमेंट पहले वापस खिंचता है, जैसे छलांग से पहले की दौड़। एडिटर का ग्राफ यूनिट बॉक्स से परे फैला है ताकि आप उस overshoot क्षेत्र में खींच सकें और तुरंत रिज़ल्ट देख सकें।
Chrome DevTools में एक बिल्ट-इन cubic-bezier एडिटर है लेकिन वह हैंडल को 0–1 बॉक्स में क्लैंप करता है, इसलिए वहाँ overshoot या anticipation इफेक्ट नहीं बना सकते। Firefox DevTools की भी यही सीमा है। दोनों में नामांकित-प्रीसेट कैटलॉग और यहाँ मिलने वाले एक्सपोर्ट ऑप्शन भी नहीं हैं। Overshoot के लिए यह उन कुछ टूल्स में से एक है जो इसे वास्तव में सपोर्ट करते हैं।
अन्य cubic-bezier टूल्स से तुलना
Lea Verou का cubic-bezier.com वह संदर्भ है जिसने ड्रैग-और-प्रीव्यू फॉर्मेट को लोकप्रिय बनाया, और यह त्वरित CSS कर्व जनरेशन के लिए बेहतरीन है। लेकिन इसमें GSAP एक्सपोर्ट नहीं है, JavaScript easing फंक्शन आउटपुट नहीं है, कोई कंपेयर मोड नहीं है, Penner प्रीसेट लाइब्रेरी नहीं है, और मोबाइल पर इंटरफ़ेस टूट जाता है। Easings.net केवल पढ़ने के लिए है — आप एक नामांकित कर्व चुनते हैं और वह वैल्यू दिखाता है, लेकिन कोई एडिटर नहीं है।
Chrome और Firefox DevTools में ब्राउज़र इंस्पेक्टर के अंदर एक हल्का cubic-bezier एडिटर है, जो DevTools में काम करते समय सुविधाजनक है। कमी यह है: उन्हें DevTools खुले बिना इस्तेमाल नहीं कर सकते, हैंडल 0–1 पर क्लैंप हैं, GSAP या JS कोड एक्सपोर्ट नहीं हो सकता, और मोबाइल पर बिल्कुल काम नहीं करते। UtiloKit का जनरेटर इंटरेक्टिव एडिटर, प्रीसेट लाइब्रेरी, कंपेयर टूल और तीन एक्सपोर्ट फॉर्मेट को एक ऐसे पेज पर जोड़ता है जो किसी भी डिवाइस पर काम करता है।
लाइव प्रीव्यू और साइड-बाय-साइड तुलना
Play दबाएं और एक डेमो एलिमेंट आपकी कर्व के साथ लूप करता है ताकि आप गति का मूल्यांकन करें, न केवल संख्याओं का। डेमो को translate, scale और opacity के बीच स्विच करें और अवधि को अपनी असली एनिमेशन से मिलाने के लिए एडजस्ट करें। Compare चालू करें ताकि दूसरी कर्व को पहली के बगल में रखा जा सके — प्रोडक्शन में लगाने से पहले सही ट्रांज़िशन टाइमिंग फंक्शन चुनने के लिए एकदम सही।
डुरेशन स्लाइडर प्रीव्यू स्पीड को 200ms से 3 सेकंड तक कंट्रोल करता है, ताकि आप परीक्षण कर सकें कि वही कर्व अलग-अलग गति पर कैसी लगती है। स्लो-मोशन प्रीव्यू अक्सर समस्याएं उजागर करती है — जैसे शुरुआत में हकलाहट — जो 300ms पर अदृश्य होती हैं। अधिकांश अन्य टूल, जिसमें cubic-bezier.com भी शामिल है, केवल एक निश्चित गति पर प्रीव्यू करते हैं और साइड-बाय-साइड तुलना नहीं देते।
CSS, GSAP और JavaScript में एक्सपोर्ट करें — मुफ्त
अपने स्टैक के लिए जो चाहिए वो कॉपी करें। CSS टैब आपको एक transition वन-लाइनर और एक पूरा @keyframes एनिमेशन ब्लॉक दोनों देता है। GSAP टैब एक CustomEase.create() कॉल आउटपुट करता है ताकि आपकी GSAP एनिमेशन कर्व से बिल्कुल मेल खाए। JS टैब एक स्टैंडअलोन javascript cubic-bezier easing फंक्शन जनरेट करता है — एक Newton-Raphson सॉल्वर जिसे आप बिना किसी डिपेंडेंसी के requestAnimationFrame या किसी भी tween में डाल सकते हैं।
एक कर्व पसंद आई? शेयर करें। टूल चारों वैल्यू को पेज URL में एनकोड करता है, इसलिए एक लिंक किसी भी डिवाइस पर आपका सटीक easing रिप्रोड्यूस करता है। सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड, स्टोर या लॉग नहीं होता — और यह पूरी तरह मुफ्त है, बिना साइन-अप के।
Frequently asked questions
CSS में cubic-bezier क्या है?
cubic-bezier() एक easing (टाइमिंग) फंक्शन है जो Bézier कर्व द्वारा परिभाषित होती है। इसे transition-timing-function या animation-timing-function में cubic-bezier(x1, y1, x2, y2) के रूप में लिखते हैं। इसके दो कंट्रोल पॉइंट कर्व को मोड़ते हैं ताकि एनिमेशन स्थिर गति के बजाय त्वरित और धीमी हो। उदाहरण के लिए, cubic-bezier(0.25, 0.1, 0.25, 1) CSS कीवर्ड 'ease' के बिल्कुल बराबर है।
Cubic-bezier के चार वैल्यू कैसे काम करते हैं?
cubic-bezier(x1, y1, x2, y2) दो कंट्रोल पॉइंट देता है: P1 = (x1, y1) कर्व की शुरुआत खींचता है और P2 = (x2, y2) अंत खींचता है। कर्व हमेशा (0,0) से शुरू होकर (1,1) पर खत्म होती है। x वैल्यू समय दर्शाते हैं और 0-1 के बीच रहने चाहिए; y वैल्यू प्रगति दर्शाते हैं और overshoot इफेक्ट के लिए 0 से नीचे या 1 से ऊपर जा सकते हैं।
Ease, ease-in, ease-out और ease-in-out में क्या अंतर है?
linear स्थिर गति से चलता है — अधिकांश UI के लिए यह अप्राकृतिक दिखता है। ease — CSS का डिफ़ॉल्ट — थोड़ा तेज शुरू होकर धीमा होता है। ease-in धीरे शुरू होकर अंत में तेज होता है, जो अक्सर किसी गिरती चीज़ जैसा लगता है। ease-out तेज शुरू होकर धीमा होता है, जो स्क्रीन पर आने वाले एलिमेंट के लिए सबसे प्राकृतिक लगता है। ease-in-out दोनों छोर पर धीमा और बीच में सबसे तेज होता है।
क्या cubic-bezier के y वैल्यू 1 से ऊपर या 0 से नीचे जा सकते हैं?
हाँ, y वैल्यू ऐसा कर सकते हैं, और इसी तरह overshoot और anticipation इफेक्ट मिलते हैं। x (समय) वैल्यू हमेशा 0–1 तक सीमित रहते हैं, लेकिन 1 से ऊपर y एलिमेंट को लक्ष्य से आगे जाकर वापस आने पर मजबूर करता है — जैसे स्प्रिंग। 0 से नीचे y पहले वापस खींचता है। उदाहरण: easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)।
CSS ट्रांज़िशन या एनिमेशन में cubic-bezier कैसे उपयोग करें?
इसे टाइमिंग-फंक्शन स्लॉट में रखें। ट्रांज़िशन के लिए: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);। Keyframe एनिमेशन के लिए: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;। इस टूल का CSS टैब आपकी मौजूदा कर्व और अवधि के साथ दोनों स्निपेट अपने आप जनरेट करता है।
easeInOutQuad जैसे नामांकित easing को cubic-bezier में कैसे बदलें?
प्रीसेट कैटलॉग से लोड करें — Penner / easings.net कर्व के सभी मानक cubic-bezier अनुमान हैं। जैसे: easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1) और easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1)। गैलरी से नामांकित कर्व चुनें और वैल्यू सीधे CSS में कॉपी करें।
क्या यह cubic-bezier जनरेटर मुफ्त और प्राइवेट है?
पूरी तरह मुफ्त, कोई साइन-अप नहीं, और कुछ भी कहीं अपलोड नहीं होता। कर्व एडिटर, लाइव प्रीव्यू, और CSS, GSAP, JavaScript एक्सपोर्ट सब आपके ब्राउज़र में स्थानीय रूप से चलते हैं। आप जो बनाते हैं वह किसी सर्वर पर नहीं जाता। URL में चार वैल्यू एनकोड करके कर्व शेयर भी कर सकते हैं — कोई अकाउंट नहीं चाहिए।
Related tools
सभी टूल्स देखें
नया कलर मिक्सर
दो रंगों को किसी भी अनुपात में मिलाएँ और परिणाम या कोई भी चरण कॉपी करें।
नया इमेज कलर पिकर
इमेज से कोई भी रंग चुनें और उसका प्रमुख पैलेट HEX, RGB और HSL में निकालें।
नया Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
नया Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
कलर पिकर और कन्वर्टर
एक रंग चुनें और उसे HEX, RGB, HSL और OKLCH में बदलें।
नया कलर कंट्रास्ट चेकर
टेक्स्ट और बैकग्राउंड रंगों के बीच WCAG AA/AAA कंट्रास्ट अनुपात जाँचें।