रेडियल ग्रेडिएंट का आकार सेट करने के लिए, radial-gradient() फंक्शन का उपयोग करें। यह फंक्शन रेडियल ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करता है। फंक्शन में पहला पैरामीटर उस आकार के रूप में सेट किया जाता है जैसा आप चाहते हैं जैसा नीचे दिखाया गया है -
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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
