रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर की ओर रंग फैलाता है। डिफ़ॉल्ट आकार अंडाकार (ellipse) होता है, लेकिन circle भी सेट कर सकते हैं। कम से कम दो कलर स्टॉप आवश्यक हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
#radial {
height: 200px; width: 200px;
background-image: radial-gradient(
rgb(255, 0, 106),
rgb(2, 0, 128),
rgb(0, 255, 42)
);
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div id="radial"></div>
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- radial-gradient() - फ़ंक्शन सिंटैक्स
- कम से कम 2 कलर स्टॉप - उदाहरण में 3 रंग
- डिफ़ॉल्ट अंडाकार - कंटेनर आकार के अनुसार
- केंद्र से शुरू - डिफ़ॉल्ट केंद्र बिंदु
- आकार विकल्प - circle, ellipse, closest-side, आदि
