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

CSS ग्रेडिएंट कैसे बनाएँ

1. ग्रेडिएंट टाइप चुनें: लीनियर या रेडियल।
2. हर कलर स्टॉप पर क्लिक कर उसका रंग सेट करें, पिकर या hex कोड से।
3. हर रंग कहाँ शुरू और ब्लेंड हो, यह तय करने के लिए स्टॉप को बार पर खींचें।
4. लीनियर ग्रेडिएंट के लिए एंगल सेट करें, या रेडियल के लिए शेप और पोज़िशन।
5. दो से ज़्यादा रंग चाहिए तो और स्टॉप जोड़ें।
6. Copy CSS पर क्लिक करें और कोड अपनी स्टाइलशीट में पेस्ट करें।

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

यह टूल आपको ग्रेडिएंट विज़ुअली बनाने देता है — कलर स्टॉप चुनना, उन्हें बार पर खींचना, और एंगल या रेडियल शेप सेट करना — फिर आपको कॉपी करने के लिए तैयार CSS थमा देता है। आउटपुट एक स्टैंडर्ड बैकग्राउंड डिक्लेरेशन है जिसे आप अपनी स्टाइलशीट में पेस्ट करते हैं; कोई इमेज फ़ाइल नहीं और कोई एक्सपोर्ट स्टेप नहीं, बस कोड।

चूँकि आप सिंटैक्स हाथ से लिखने के बजाय एक लाइव प्रीव्यू को आकार दे रहे हैं, आप ठीक-ठीक देख लेते हैं कि आपके पेज तक पहुँचने से पहले क्या रेंडर होगा। यह उस भाषा से अटकल हटा देता है जहाँ एक अकेली ग़लत जगह पड़ी वैल्यू चुपचाप कुछ भी न बनाकर रह जाती है।

CSS ग्रेडिएंट सिंटैक्स कैसे काम करता है

एक लीनियर ग्रेडिएंट linear-gradient(direction, color-stop, color-stop, ...) के रूप में लिखा जाता है। direction एक एंगल होता है जैसे 90deg या एक कीवर्ड जैसे to right, और हर स्टॉप एक रंग होता है जिसके साथ वैकल्पिक पोज़िशन जैसे #ff6600 20%। एक रेडियल ग्रेडिएंट radial-gradient() इस्तेमाल करता है और एंगल के बजाय एक शेप और पोज़िशन बताता है, एक केंद्र बिंदु से बाहर की ओर ब्लेंड करते हुए।

स्टॉप पोज़िशन में ही बारीकियाँ छिपी रहती हैं। उन्हें छोड़ दें तो ब्राउज़र स्टॉप को समान दूरी पर रखता है; दो स्टॉप को एक ही पोज़िशन दें तो आपको ब्लेंड के बजाय एक तीखा किनारा मिलता है, इसी तरह आप धारियाँ (stripes) बनाते हैं। जनरेटर आपके लिए मान्य सिंटैक्स लिखता है, इसलिए आप खींचते हुए कोड को बदलता देखकर फ़ॉर्मैट सीख सकते हैं।

प्रोफ़ेशनल दिखने वाले ग्रेडिएंट के लिए टिप्स

सबसे बड़ा क्वालिटी लीवर है पड़ोसी ह्यू चुनना: नीला से बैंगनी, नारंगी से गुलाबी। कलर व्हील के आमने-सामने के रंग बीच में एक मैले भूरे से गुज़रते हैं। अगर दूर के ह्यू जोड़ने ही हों, तो एक मिड-स्टॉप जोड़ें जो जान-बूझकर कोई बीच का रंग चुने।

हल्कापन भी बिकता है। एक ही ह्यू के दो शेड के बीच का बैकग्राउंड ग्रेडिएंट सजावट के बजाय गहराई-सा पढ़ा जाता है। और फ़ोटो पर टेक्स्ट ओवरले के लिए, ट्रांसपेरेंट काले तक जाता ग्रेडिएंट मानक तरकीब है: linear-gradient(rgba(0,0,0,.6), transparent)।

ग्रेडिएंट कहाँ अपनी क़ीमत वसूल करते हैं

आम काम हैं हीरो और सेक्शन बैकग्राउंड, बटन और कार्ड फ़िल, और फ़ोटो ओवरले जो किसी व्यस्त इमेज पर सफ़ेद टेक्स्ट को पढ़ने योग्य रखते हैं। एक कोमल दो-रंगी बैकग्राउंड किसी वरना सपाट लेआउट में गहराई जोड़ता है, जबकि एक चटख मल्टी-स्टॉप फ़िल किसी call-to-action बटन को पेज से उभार सकता है।

ग्रेडिएंट इमेज की जगह भी ले लेते हैं। एक अच्छे-से चुना बैकग्राउंड ग्रेडिएंट तुरंत लोड होता है, शून्य फ़ाइल वज़न के साथ किसी भी स्क्रीन पर स्केल होता है, और कभी पिक्सलेट नहीं होता, इसीलिए सजावटी फ़िल और खाली स्टेट के लिए यह अक्सर किसी JPEG से बेहतर रहता है।

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

ग्रेडिएंट टेक्स्ट एक लोकप्रिय हेडिंग ट्रीटमेंट है। ग्रेडिएंट को एलिमेंट का बैकग्राउंड सेट करें, फिर एक ट्रांसपेरेंट टेक्स्ट कलर के साथ background-clip: text जोड़ें ताकि ग्रेडिएंट अक्षरों की आकृति में से झलके। जनरेटर ग्रेडिएंट वाला हिस्सा बनाता है; उसके इर्द-गिर्द आप ये दो अतिरिक्त लाइनें लपेटते हैं।

contrast का ध्यान रखें: कोई ग्रेडिएंट जो किसी हल्के रंग में डुबकी लगाए, किसी हेडलाइन का हिस्सा हल्के बैकग्राउंड पर पढ़ना मुश्किल छोड़ सकता है। ग्रेडिएंट के सबसे हल्के बिंदु को उसके पीछे की सतह के मुक़ाबले टेस्ट करें, और जो कुछ भी असली सामग्री रखता हो उसके लिए ऐसे ग्रेडिएंट पसंद करें जो पढ़ने योग्य दायरे में रहें।

सुलभता और परफ़ॉर्मेंस के नोट

जब कोई ग्रेडिएंट टेक्स्ट के पीछे बैठता है, तो contrast पूरे ग्रेडिएंट में टिकना चाहिए, सिर्फ़ उसके मध्यबिंदु पर नहीं। टेक्स्ट को उन सबसे हल्के और सबसे गहरे स्टॉप के मुक़ाबले जाँचें जिन पर वह ओवरलैप करता है, क्योंकि जो जोड़ी औसतन पास होती है वह फिर भी वहाँ फ़ेल हो सकती है जहाँ ग्रेडिएंट सबसे फीका है। फ़ोटो पर एक अर्ध-पारदर्शी गहरा ओवरले पढ़ने-योग्यता की गारंटी देने का एक भरोसेमंद तरीका है।

परफ़ॉर्मेंस के मामले में, CSS ग्रेडिएंट ब्राउज़र द्वारा बनाए जाते हैं और डाउनलोड करने में लगभग कुछ भी खर्च नहीं करते, बैकग्राउंड इमेज के उलट। ये रेज़ोल्यूशन-स्वतंत्र भी होते हैं, इसलिए एक डिक्लेरेशन फ़ोन से लेकर 4K डिस्प्ले तक साफ़ दिखता है, बिना आपके कई assets भेजे।

संबंधित टूल

ग्रेडिएंट उतने ही अच्छे होते हैं जितने उन्हें खिलाने वाले रंग, इसलिए कलर पिकर स्टॉप चुनने और उन्हें डालने से पहले उनकी HEX, RGB और HSL वैल्यू पढ़ने का एक स्वाभाविक साथी है।

अगर कोई डिज़ाइन आपको ग़लत नोटेशन में रंग देता है, तो HEX to RGB और RGB to HEX कन्वर्टर उन्हें सटीक गणित से बदल देते हैं। ये सब पूरी तरह आपके ब्राउज़र में चलते हैं, और ग्रेडिएंट जनरेटर खुद सादा CSS देता है जिसे आप बस कॉपी करते हैं।

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

संबंधित टूल