ग्रेडिएंट बैकग्राउंड बनाने का सबसे भारी तरीका है JPEG या PNG इमेज अपलोड करना — जबकि CSS ग्रेडिएंट सिर्फ़ कुछ बाइट्स के टेक्स्ट कोड में वही इफ़ेक्ट दे देता है, बिना किसी एक्स्ट्रा HTTP रिक्वेस्ट के। धीमे या महंगे मोबाइल डेटा पर काम करने वाले किसी भी यूज़र के लिए यह फ़र्क़ मायने रखता है।
तीन तरह के कलर ट्रांज़िशन
linear-gradient(45deg, red, blue) किसी दिए गए एंगल पर सीधी लाइन में रंग फैलाता है — बटन, बैनर और कार्ड बैकग्राउंड में सबसे कॉमन इस्तेमाल। radial-gradient(circle, yellow, orange) रंग को किसी पॉइंट से बाहर की ओर सर्कल या एलिप्स में फैलाता है, स्पॉटलाइट जैसे इफ़ेक्ट के लिए सही। conic-gradient(red, yellow, green, blue, red) घड़ी की सुई की तरह रंग को सेंटर पॉइंट के चारों ओर घुमाता है — बिना एक्स्ट्रा ग्राफ़िक के पाई चार्ट या प्रोग्रेस रिंग बनाने वाला इकलौता टाइप।
Color stops से बारीक़ कंट्रोल
हर रंग को किसी ख़ास पर्सेंटेज पर फ़िक्स किया जा सकता है, जैसे linear-gradient(red 0%, yellow 50%, blue 100%), जिससे यह तय होता है कि ट्रांज़िशन कितना अचानक या स्मूथ होगा। repeating-linear-gradient() और repeating-radial-gradient() फ़ंक्शन्स उसी सीक्वेंस को दोहराकर सिर्फ़ एक लाइन CSS से धारीदार या चेकरबोर्ड पैटर्न बना देते हैं, बिना किसी टेक्सचर इमेज के।
यह क्यों ज़रूरी है
- एंगल और रंग हाथ से सेट किए बिना रेडी-मेड CSS ग्रेडिएंट कोड तेज़ी से चुनना और कॉपी करना।
- यह समझना कि किसी ख़ास विज़ुअल इफ़ेक्ट के लिए कौन-सा ग्रेडिएंट टाइप सही है।
- चाहे गए ट्रांज़िशन के लिए कलर स्टॉप्स की पोज़िशन को बारीक़ी से एडजस्ट करना।
इमेज नहीं, सिर्फ़ कोड
2016 के बाद जियो के आने से भारत में मोबाइल डेटा बेहद सस्ता हुआ, लेकिन देश के बड़े हिस्से में अब भी 2G/3G नेटवर्क और एंट्री-लेवल फ़ोन आम हैं, और कई साइट्स की ऑडियंस टियर-2, टियर-3 शहरों से आती है जहां हर किलोबाइट मायने रखता है। ऐसे में बैकग्राउंड इमेज की जगह CSS ग्रेडिएंट इस्तेमाल करना — जो GPU पर बिना डाउनलोड के रेंडर होता है — पेज को हल्का और तेज़ बनाए रखने का एक सीधा तरीक़ा है, फिर चाहे यूज़र किसी भी डिवाइस या नेटवर्क पर क्यों न हो।