CSS Advance Gradients

In this advanced series of CSS tutorials, we will discuss how we can make a smooth transition between specified color using gradient values.

CSS Gradients

A gradient is a transition of two or more than two specified colors, and to create a transition, we can use the background-image property with the gradient value. There are two types of gradients

  • Linear Gradients(up/down/left/right/diagonally)
  • Radial Gradient (from the center)

CSS Linear Gradients

In linear gradients, the color transition can be moved from down to up, up to down, left to right, right to left, and diagonally. And to create a smooth transition gradient, we use the background-image property and linear-gradient() value. Inside the linear-gradient(direction, color1,color2) , we define the direction in which the transition should go and two or more colors.

Syntax 

background-image: linear-gradient(direction, color1, color2, ...);

The linear-Gradient transition from Top to bottom

Top to bottom is the default value for the direction, in this color transition, change from top to bottom.

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:linear-gradient(blue,green);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
        Linear transition top to bottom
    </div>
</body>
</html>

Preview

Linear transition top to bottom

The linear-gradient transition from left to right

When we want to set a colorful transition from left to right then, the linear-gradient direction must be set to right .

Syntax 

background-image: linear-gradient(to right, color1, color2, ...);

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:linear-gradient(to right,blue,green,yellow);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
        Linear transition left to right
    </div>
</body>
</html>

Preview

Linear transition left to right

Note : To set the direction value to left from right to left transition or set the direction to up from bottom to up transition. Or use can Just reverse the order of the colors

Linear-gradient diagonal transition

To make a diagonal transition set the direction value to bottom right or to bottom left . This will present gradient colors in a diagonal direction.

Syntax 

background-image: linear-gradient(to bottom right, color1, color2, ...);

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:linear-gradient(to bottom right,blue,green,yellow,red);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
        Linear transition Digonal
    </div>
</body>
</html>

Preview

Linear transition Digonal

CSS Radial Gradient

In the Radial gradient, the color transition starts from the center of the image. And like the linear-gradient, it also requires two or more than two colors to perform the smooth transition. But unlike the direction radial-gradient accept shape, size, and position for the transition.

  • The default shape is an ellipse.
  • The default size is farthest-corner
  • The default position is the center.

Syntax 

background-image: radial-gradient(shape size at position, centercolor, color2,..);

Example (1) (Evenly Spaced Color) 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:radial-gradient(red,yellow,blue);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
    </div>
</body>
</html>

Preview

Example (2) (various-shaped color) 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:radial-gradient(red 10%,yellow 30%,blue 60%);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">

    </div>
</body>
</html>

Preview

The shape of the radial gradient

By default, the shape of every radial transition is an ellipse but It can also be changed to circle.

Syntax 

  background-image: radial-gradient(circle, color1, color2, ….);

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:radial-gradient(circle,red 10%,yellow 30%,blue 60%);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
    </div>
</body>
</html>

Preview

Radial gradient Size

The size parameter specifies the size of the gradient, and it accepts 4 values.

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image:radial-gradient(closest-side,red ,yellow,blue);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">

    </div>
</body>
</html>

Preview

Create a Rainbow transition in CSS

We can either use the linear-gradient or radial-gradient to create a rainbow. But all the colors must be mention in the gradient parameter.

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grad {
                background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
                height:200px;
            }
        </style>
    </head>
<body>
    <div class="grad">
    </div>
</body>
</html>

Preview

CSS Gradient

  • A gradient is a smooth transition of multiple colors.
  • To create a gradient, we use the background-image property.
  • A gradient could be linear or radial.
  • The linear can create a color transition from left to right, top to bottom, or diagonally.
  • The radial gradient creates a transition from center to corner.
Previous Tutorial Next Tutorial