• Post category:CSS

How to Create Radial Gradient Background in CSS

Radial Gradient Background CSS

In this article, we will see about radial gradient background CSS

Radial Gradient

It is a function used to create a background consisting of a transition between two or more colors that radiate from a given origin.

Syntax:

Background: radial-gradient(shape at position, color-stop 1, color-stop2,...last-color-stop)

Shape at position

Shape = It indicates the shape of the gradient. i.e circle, ellipse
position = It indicates the origin of the gradient

top left, tp center, top right
center left, center center, center right
bottom left, bottom center, bottom right
offset-x-px offset-y-px
offset-x-% offset-y-%

color stop: color position

You can give color value as “color name”, hex color value, rgb() color value, rgba() color value.
And you can give position value to px (pixels) or % percentage.

Example code

<html>
<head>
<style type="text/css">
.circle{
width: 300px;
height: 300px;
background: radial-gradient(circle at center center, red 0%, blue 100%); }
.ellipse{
width: 300px;
height: 300px;
background: radial-gradient(ellipse at center center, red 0%, blue 100%); }
</style>
</head>
<body>
<div class="circle"> </div><br>
<div class="ellipse"> </div>
</body>
</html>

Output:

radial gradient background css

  1. In the above code, we have two <div> tags with different classname like”circle” and “ellipse”.
  2. We select the “circle” class name in CSS using the class selector. Then we use raidal-gradient property and set the shape to “circle“, and the position to “center center“. Then we use red 0% and blue 100%.
  3. We select the “ellipse” class name in CSS using the class selector. Then we use raidal-gradient property and set shape to “ellipse“, and the position to “center center”. Then we use red 0% and blue 100%.
  4. See the above output, the difference between ellipse and circle value in radial-gradient property.

Leave a Reply