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

यह कैसे काम करता है

ग्रेडिएंट CSS में एक अकेली घोषणा के रूप में लिखे जाते हैं जिसका सिंटैक्स गलत याद करना आसान है, ख़ासकर कोण की परिपाटी और रंग स्टॉप कहाँ जाते हैं। ठीक करते हुए नतीजा देखना जाँचने के लिए पेज दोबारा लोड करने से तेज़ है।

कोण की परिपाटी लोगों को चकमा देती है

CSS में 0 डिग्री ऊपर की ओर इशारा करती है और कोण घड़ी की दिशा में बढ़ता है, इसलिए 90 डिग्री बाएँ से दाएँ चलती है और 180 डिग्री ऊपर से नीचे। यह गणितीय परिपाटी से और कई डिज़ाइन टूल से अलग है, इसीलिए कहीं और से कॉपी किया ग्रेडिएंट अक्सर घूमा हुआ निकलता है।

तीन प्रकार

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

ग्रेडिएंट इमेज है, रंग नहीं

यह दूसरी चीज़ है जो लोगों को अटकाती है। CSS ग्रेडिएंट को बैकग्राउंड इमेज मानता है, इसलिए यह background और background-image में काम करता है पर color, border-color या सादे रंग की अपेक्षा करने वाली किसी भी जगह नहीं। टेक्स्ट ग्रेडिएंट के लिए background-clip चाहिए, जो एक अलग तकनीक है।

बीच का रंग जोड़ना

दो स्टॉप साफ़ मिश्रण देते हैं। तीसरा आपको परिवर्तन को किसी और ह्यू से गुज़ारने देता है, जिससे वह मटमैला धूसर नहीं बनता जो दो विपरीत रंगों के सीधे मिलने पर दिखता है।