CSS ग्रेडिएंट जेनरेटर

CSS ग्रेडिएंट जेनरेटर क्या है?

CSS ग्रेडिएंट जेनरेटर उन वेब डिज़ाइनरों और फ्रंट-एंड डेवलपरों के लिए ब्राउज़र में चलने वाला मुफ़्त टूल है जो सिंटैक्स हाथ से लिखने के बजाय ग्रेडिएंट को दृश्य रूप से बनाना चाहते हैं। लीनियर, रेडियल या कोनिक चुनें — वैकल्पिक दोहराव वैरिएंट के साथ — फिर एक खींचने योग्य पूर्वावलोकन बार पर या HEX रंग और स्थिति फ़ील्ड वाली प्रति-स्टॉप पंक्तियों में कलर स्टॉप संपादित करें। रेडियल ग्रेडिएंट वृत्त/दीर्घवृत्त आकार, एक आकार-माप कीवर्ड (closest-side, closest-corner, farthest-side, farthest-corner) और at X% Y% केंद्र देते हैं, जबकि कोनिक एक आरंभिक कोण और केंद्र लेते हैं। आप कई ग्रेडिएंट लेयर को अल्पविराम से अलग करके एक ही बैकग्राउंड में परत कर सकते हैं, रैंडम ग्रेडिएंट बना सकते हैं, तैयार पैलेट लगा सकते हैं, हर स्टॉप का ह्यू घुमा सकते हैं, और चिपकाने-योग्य background नियम कॉपी कर सकते हैं।

CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें

1. ग्रेडिएंट प्रकार चुनें — लीनियर, रेडियल या कोनिक — और दोहराव पैटर्न के लिए विकल्पों में दोहराव चालू करें।
2. स्टॉप को पूर्वावलोकन बार पर खींचकर पुनः स्थित करें, स्टॉप जोड़ने के लिए बार पर किसी खाली जगह क्लिक करें, या स्टॉप हटाने के लिए उस पर डबल-क्लिक करें।
3. प्रत्येक स्टॉप को उसके HEX रंग और स्थिति फ़ील्ड से सूक्ष्म रूप से समायोजित करें, या (जहाँ समर्थित हो) आईड्रॉपर से अपनी स्क्रीन से रंग लें।
4. रेडियल ग्रेडिएंट के लिए आकार (वृत्त या दीर्घवृत्त), एक आकार-माप कीवर्ड और केंद्र X/Y सेट करें; कोनिक के लिए आरंभिक कोण और केंद्र।
5. ग्रेडिएंट को एक ही बैकग्राउंड में परत करने के लिए और लेयर जोड़ें, रैंडम आज़माएं, पैलेट लगाएं, या सभी ह्यू एक साथ घुमाएं।
6. उत्पन्न CSS background नियम कॉपी करें और अपनी स्टाइलशीट में चिपकाएं।

उदाहरण

लीनियर, 90deg, #4f86f7 पर 0% और #9333ea पर 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

रेडियल, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

लेयर 1 लीनियर 90deg; लेयर 2 रेडियल circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

अक्सर पूछे जाने वाले सवाल

कौन-कौन से ग्रेडिएंट प्रकार और विकल्प समर्थित हैं?

लीनियर, रेडियल और कोनिक ग्रेडिएंट, प्रत्येक एक वैकल्पिक दोहराव वैरिएंट के साथ। रेडियल वृत्त/दीर्घवृत्त आकार, एक आकार-माप कीवर्ड (closest-side, closest-corner, farthest-side, farthest-corner) और at X% Y% केंद्र जोड़ता है; कोनिक आरंभिक कोण और केंद्र जोड़ता है। आप कई लेयर को एक ही बैकग्राउंड में भी परत कर सकते हैं।

खींचने योग्य स्टॉप बार कैसे काम करता है?

किसी भी स्टॉप को बार पर खींचकर उसकी स्थिति बदलें, बार के किसी खाली भाग पर क्लिक करके एक इंटरपोलेटेड रंग वाला नया स्टॉप डालें, और स्टॉप हटाने के लिए उस पर डबल-क्लिक करें (कम से कम दो बनाए रखे जाते हैं)। हर स्टॉप के पास बार के नीचे HEX रंग और स्थिति फ़ील्ड भी होते हैं।

क्या मैं अपनी स्क्रीन से रंग ले सकता हूँ?

हाँ, उन ब्राउज़रों में जो EyeDropper API का समर्थन करते हैं। उपलब्ध होने पर हर स्टॉप के बगल में एक आईड्रॉपर बटन दिखता है; उसे क्लिक करें और स्क्रीन पर कोई भी पिक्सेल चुनें। आप हमेशा HEX मान टाइप कर सकते हैं या मूल कलर चिप उपयोग कर सकते हैं।

रैंडम, पैलेट और ह्यू घुमाना क्या करते हैं?

रैंडम सक्रिय लेयर को एक नए रैंडम ग्रेडिएंट से बदल देता है, पैलेट सक्रिय लेयर के स्टॉप को एक चुने हुए रंग-सेट से बदल देते हैं, और ह्यू घुमाएं हर लेयर के हर स्टॉप का ह्यू एक साथ खिसका देता है। ये केवल तभी ग्रेडिएंट बदलते हैं जब आप इन्हें क्लिक करते हैं।

क्या मेरे रंग या CSS कहीं अपलोड होते हैं?

नहीं। ग्रेडिएंट पूरी तरह आपके ब्राउज़र में स्थानीय स्ट्रिंग और रंग गणित से बनाया जाता है — कोई रंग, CSS या सेटिंग कभी किसी सर्वर पर नहीं भेजी जाती, इसलिए यह ऑफ़लाइन काम करता है और आपके काम को निजी रखता है।