CSS ग्रेडिएंट क्या है?
ड्रैग किए जा सकने वाले रंग स्टॉप्स के साथ लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाएँ, ब्लेंड मोड्स और तैयार-टू-यूज़ CSS के साथ।
CSS ग्रेडिएंट एक ऐसी छवि है जिसे ब्राउज़र रंगों के बीच स्मूथ ट्रांज़िशन से जनरेट करता है। यह रेंडर समय पर गणना होती है, इसलिए किसी भी आकार में बिना पिक्सेल हुए स्केल होती है और इमेज फ़ाइल की ज़रूरत नहीं पड़ती।
इसके तीन प्रकार हैं: लीनियर (दिशा या कोण), रेडियल (केंद्र से वृत्त या दीर्घवृत्त) और कोनिक (केंद्र के चारों ओर स्वीप)। हर ग्रेडिएंट रंग स्टॉप से परिभाषित होता है; हर स्टॉप में पोज़िशन और अल्फा देकर रंग मिश्रण नियंत्रित किया जा सकता है।
background-image में कॉमा से अलग करके कई ग्रेडिएंट परतों में जोड़े जा सकते हैं और background-blend-mode से मिलाकर अधिक समृद्ध टेक्सचर बनाया जा सकता है। CSS oklch जैसे कलर स्पेस में इंटरपोलेशन भी सपोर्ट करता है, जिससे ट्रांज़िशन ज़्यादा स्मूद दिखते हैं।
- लीनियर ग्रेडिएंट रोशनी और दिशा आधारित गहराई के लिए अच्छा है।
- रेडियल और कोनिक ग्रेडिएंट स्पॉटलाइट, रिंग और कलर व्हील के लिए उपयोगी हैं।
- स्टॉप पोज़िशन बदलकर ट्रांज़िशन को तेज़ या मुलायम बनाया जा सकता है।