CSS linear-gradient() फ़ंक्शन

वर्णन और उपयोग

CSS linear-gradient() फ़ंक्शन लीनियर ग्रेडिएंट को पृष्ठभूमि के रूप में बनाने के लिए उपयोग किया जाता है。

लीनियर ग्रेडिएंट बनाने के लिए कम से कम दो रंग सूचक निर्दिष्ट करना आवश्यक है। रंग सूचक आप जिसमें शान्त पारितालन करना चाहते हैं वह रंग हैं। आप यहां शुरूआत और दिशा (या कोण) और ग्रेडिएंट असर भी सेट कर सकते हैं。

लीनियर ग्रेडिएंट उदाहरण:

उदाहरण

उदाहरण 1

यह लीनियर ग्रेडिएंट शीर्ष से शुरू होता है। यह लाल से नीले तक और फिर नीले से भूरे तक ट्रांसीशन करता है:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

खुद से प्रयास करें

उदाहरण 2

एक वाम से शुरू होने वाला लीनियर ग्रेडिएंट। यह लाल से नीले तक ट्रांसीशन करता है:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

खुद से प्रयास करें

उदाहरण 3

एक वामोत्तर शुरू होने वाला (और दक्षिण-दक्षिण पश्चिम तक फैलने वाला) लीनियर ग्रेडिएंट:

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

खुद से प्रयास करें

उदाहरण 4

एक दिशा निर्दिष्ट लीनियर ग्रेडिएंट:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

खुद से प्रयास करें

उदाहरण 5

एक बहुत से रंग सूचकको शामिल करने वाला लीनियर ग्रेडिएंट:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

खुद से प्रयास करें

उदाहरण 6

दो स्थानों के रंग निर्देशक वाले लीनियर ग्रेडिएंट:

#grad {
  background: linear-gradient(
    to right,
    रेड 17%,
    ऑरेंज 17% 34%,
    येल्लो 34% 51%,
    ग्रीन 51% 68%,
    ब्लू 68% 84%,
    इंडिगो 84%
  );
}

खुद से प्रयास करें

उदाहरण 7

एक पारदर्शी लीनियर ग्रेडिएंट:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

खुद से प्रयास करें

CSS व्याकरण

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
मान वर्णन
side-or-corner

वृद्धि. ग्रेडिएंट के आरंभ का स्थान। शब्द 'to' से शुरू होता है, इसके बाद सबसे अधिक दो अन्य शब्द:

  • बाएँ या दाएँ
  • ऊपर या नीचे

डिफ़ॉल्ट मान to bottom (नीचे) है।
angle

वृद्धि. ग्रेडिएंट के दिशा कोण:

  • 0deg बराबर है: ऊपर (to top)
  • 180deg बराबर है: नीचे (to bottom)
  • 270deg बराबर है: बाएँ (to left)
  • 90deg बराबर है: दाएँ (to right)
color-stop1, color-stop2,...

अनिवार्य. रंग निर्देशक आप जिसके बीच शांत संतृप्ति प्राप्त करना चाहते हैं के रंग हैं。

यह मान एक रंग मान से बना है, जिसके बाद एक वृद्धि के रंग निर्देशक (0% से 100% के बीच का प्रतिशत या ग्रेडिएंट अक्ष पर की लंबाई) का एक अनिवार्य एक और एक वृद्धि का रंग निर्देशक के रूप में चुना जा सकता है。

तकनीकी विवरण

संस्करण: CSS3

ब्राउज़र समर्थन

तालिका में नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र के संस्करण को प्रदर्शित करते हैं。

च्रोम एज फ़ायरफॉक्स सफारी ओपेरा
linear-gradient()
26 10 16 6.1 12.1
दो स्थानों के रंग निर्देशक
71 79 64 12.1 58

संबंधित पृष्ठ

तूतीर्ण:CSS ग्रेडिएंट

संदर्भ:सीएसएस बैकग्राउंड-इमेज गुण

संदर्भ:CSS conic-gradient() फ़ंक्शन

संदर्भ:CSS radial-gradient() फ़ंक्शन

संदर्भ:CSS repeating-conic-gradient() फ़ंक्शन

संदर्भ:CSS repeating-linear-gradient() फ़ंक्शन

संदर्भ:CSS repeating-radial-gradient() फ़ंक्शन