फ़ंक्शन radial-gradient

फ़ंक्शन radial-gradient एक रेडियल ग्रेडिएंट सेट करता है। यह फ़ंक्शन उन गुणों पर लागू होता है जो बैकग्राउंड इमेज सेट करते हैं: background, background-image या बॉर्डर इमेज: border-image, background-image-source.

सिंटैक्स

सिलेक्टर {
	background: radial-gradient([आकृति प्रकार स्थिति], रंग1 आकार1, रंग2 आकार2...);
}

मान

मान	विवरण
आकृति	स्वीकार्य मान: `ellipse` अण्डाकार ग्रेडिएंट (डिफ़ॉल्ट), `circle` वृत्ताकार ग्रेडिएंट।
प्रकार	ग्रेडिएंट का विस्तार सेट करता है। स्वीकार्य मान: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`।
स्थिति	कीवर्ड `at` के बाद आकार की इकाइयों में स्थिति निर्दिष्ट की जाती है या कीवर्ड `top`, `bottom`, `left`, `right`, `center` का उपयोग करके विभिन्न संयोजनों में।
रंग1	रंग की इकाइयों में ग्रेडिएंट का प्रारंभिक रंग।
रंग2	रंग की इकाइयों में ग्रेडिएंट का अंतिम रंग।
आकार	ग्रेडिएंट के एक निश्चित रंग की सीमा निर्धारित करता है आकार की इकाइयों में।

प्रकार के लिए मान

मान	विवरण
`closest-side`	ग्रेडिएंट का आकार ब्लॉक के निकटतम किनारे से मेल खाता है।
`closest-corner`	ग्रेडिएंट का आकार ब्लॉक के निकटतम कोने की दूरी की जानकारी के आधार पर गणना की जाती है।
`farthest-side`	ग्रेडिएंट ब्लॉक के दूर वाले किनारे तक फैलता है।
`farthest-corner`	ग्रेडिएंट का आकार ब्लॉक के दूर वाले कोने की दूरी की जानकारी के आधार पर गणना की जाती है।

टिप्पणी

प्रकार और आकृति को आपस में बदला जा सकता है, लेकिन स्थिति पहले पैरामीटर के अंत में आनी चाहिए। ग्रेडिएंट का प्रकार और उसका आकार एक साथ काम नहीं करते (तार्किक, क्योंकि वे टकराते हैं)। आकार प्रभावी होता है।

उदाहरण . सबसे सरल विकल्प

चलिए बस प्रारंभिक और अंतिम रंग सेट करते हैं:

<div id="elem"></div>

#elem {
	background: radial-gradient(red, blue);
	width: 200px;
	height: 200px;
}

उदाहरण . स्थिति जोड़ते हैं

चलिए केंद्र की स्थिति सेट करते हैं: 30px - बाएं से ऑफ़सेट, 100px - ऊपर से ऑफ़सेट:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

उदाहरण . प्रतिशत में स्थिति

चलिए केंद्र की स्थिति प्रतिशत में सेट करते हैं: 30% - बाएं से ऑफ़सेट, 50% - ऊपर से ऑफ़सेट:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30% 50%, red, blue);
	width: 200px;
	height: 200px;
}

उदाहरण . कीवर्ड द्वारा स्थिति

कीवर्ड का उपयोग किया जा सकता है top, bottom, left, right, center विभिन्न संयोजनों में। उदाहरण के लिए, ग्रेडिएंट को दाएं केंद्र में रखते हैं:

<div id="elem"></div>

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

उदाहरण . ग्रेडिएंट का आकार

इस मामले में ग्रेडिएंट इस तरह काम करेगा: 0px से 20px तक शुद्ध लाल रंग होगा, 20px से 60px तक - ग्रेडिएंट लाल से नीले रंग तक, 60px के बाद - शुद्ध नीला रंग:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

उदाहरण . लगातार कई रंग

इस मामले में ग्रेडिएंट इस तरह काम करेगा: 0px से 20px तक शुद्ध लाल रंग होगा, 20px से 40px तक शुद्ध नीला रंग होगा, 40px से 60px तक - ग्रेडिएंट नीले से हरे रंग तक, 60px के बाद - शुद्ध हरा रंग:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

उदाहरण . आकार + स्थिति

चलिए एक साथ विभिन्न रंगों के लिए आकार और ग्रेडिएंट केंद्र की स्थिति सेट करते हैं:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

उदाहरण . ग्रेडिएंट की आकृति

ग्रेडिएंट की आकृति पहले पैरामीटर द्वारा सेट की जाती है और 2 मान ले सकती है: circle (वृत्ताकार ग्रेडिएंट) या ellipse (अण्डाकार ग्रेडिएंट, डिफ़ॉल्ट)। तो अब तक हमने अण्डाकार ग्रेडिएंट क्यों नहीं देखे, हालांकि यह डिफ़ॉल्ट रूप से सेट है? क्योंकि अब तक ब्लॉक का आकार वर्गाकार था। यदि हम आकार को आयताकार में बदलते हैं, तो हम अण्डाकार ग्रेडिएंट देखेंगे:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

उदाहरण . गोल ग्रेडिएंट

चलिए एक आयताकार ब्लॉक में गोल ग्रेडिएंट बनाते हैं। इसके लिए कीवर्ड का उपयोग करके ग्रेडिएंट की आकृति सेट करते हैं circle:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

उदाहरण . स्थिति जोड़ते हैं

चलिए पिछले कोड में ग्रेडिएंट की स्थिति भी जोड़ते हैं:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार farthest-corner + circle

ग्रेडिएंट का आकार ब्लॉक के दूर वाले कोने की दूरी की जानकारी के आधार पर गणना की जाती है:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार farthest-corner + ellipse

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार farthest-side + circle

ग्रेडिएंट ब्लॉक के दूर वाले किनारे तक फैलता है:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार farthest-side + ellipse

ग्रेडिएंट ब्लॉक के दूर वाले किनारे तक फैलता है:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार closest-corner + circle

ग्रेडिएंट का आकार ब्लॉक के निकटतम कोने की दूरी की जानकारी के आधार पर गणना की जाती है:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार closest-corner + ellipse

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार closest-side + circle

ग्रेडिएंट का आकार ब्लॉक के निकटतम किनारे से मेल खाता है:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

उदाहरण . प्रकार closest-side + ellipse

ग्रेडिएंट का आकार ब्लॉक के निकटतम किनारे से मेल खाता है:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

यह भी देखें

फ़ंक्शन linear-gradient,
जो एक लीनियर ग्रेडिएंट बनाता है
फ़ंक्शन repeating-linear-gradient,
जो एक दोहराव वाला लीनियर ग्रेडिएंट बनाता है
फ़ंक्शन repeating-radial-gradient,
जो एक दोहराव वाला रेडियल ग्रेडिएंट बनाता है