रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में पहला पैरामीटर नीचे दिखाए गए अनुसार इच्छित आकार के रूप में सेट किया जाना है -
background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239, 255));
CSS का उपयोग करके रेडियल ग्रेडिएंट के आकार को सेट करने के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 300px;
background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239,
255));
}
</style>
</head>
<body>
<h1>Radial Gradient Shape Example</h1>
<div id="radial"></div>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
