To set the shape of the radial gradient, use the radial-gradient() function. This function sets a radial gradient as the background image. The first parameter in the function is to be set as the shape you want as shown below −
background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239, 255));
Following is the code for setting the shape of the radial gradients using CSS −
Example
<!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>
Output
The above code will produce the following output −