How to style CSS linear and radial gradient?-Programming tutorial

Table of Contents

CSS gradient

When you need transition between two or more colors without using images, the CSS gradient property come into action. The CSS gradient property allows you to create a gradient from one color to another color without using images.

The CSS gradient provides a facility to generate smooth transition between two or more colors. In earlier times, this was achieved with the help of images. The gradient elements can be scaled up or scaled down without compromising color quality.

There are two types of gradient:

Linear gradients
Radial gradients

Linear gradients

Linear gradients are created when you define at least two color stops. However, you can create more complex gradient effects with the help of more color stops.

Color stops are the colors you want to render smooth transitions among. The basic syntax of the linear gradient is given below:

linear-gradient(direction, color-stop1, color-stop2….)

Linear gradient can be applied in different ways:

Top to bottom direction

This is the default direction for linear gradient. It starts from the top to bottom. The first color scatters from the top and the next color scatters towards bottom. Let us apply top to bottom gradient to background-image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded border property</title>
    <style>
        .container{
            border:3px solid rgb(94, 255, 0);
            height:150px;
            width:500px;
        }
        div#onevalue{
            background-image:linear-gradient(red, pink);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Top to bottom gradient</p></b>
    </div>
</body>
</html>

Left to right direction

It starts from left and goes toward right or starts from right side and goes toward left. The first color scatters from the left side with next color scatters towards right and vice-versa. Let us apply gradient towards right side as a background-image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:150px;
            width:500px;
        }
        div#onevalue{
            background-image:linear-gradient(to right, red, pink);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Left to right gradient</p></b>
    </div>
</body>
</html>

Left to right direction, linear gradient

Diagonal direction

You can also set gradient along the diagonal direction. It starts from left top corner and goes towards bottom right corner. Let us take an example of diagonal gradient with three colors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:150px;
            width:500px;
        }
        div#onevalue{
            background-image:linear-gradient(to bottom right, red, pink, yellow);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Diagonal gradient</p></b>
    </div>
</body>
</html>

Linear gradient using angle

You can also set a linear gradient with the help of angle instead of setting direction. The angle 0 deg creates a bottom to top gradient, and positive angles represent clockwise rotation, that means the angle 90 deg creates a left to right gradient.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:150px;
            width:500px;
        }
        div#onevalue{
            background-image:linear-gradient(40deg, red, pink, yellow);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Angular gradient</p></b>
    </div>
</body>
</html>

Linear gradient using angle in css, www.programmingtutorial.in

Linear gradient with transparency property

CSS gradients also support transparency, which can be used to create fading effects. To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color. 0 indicates full transparency, 1 indicates full color or full opacity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:150px;
            width:500px;
        }
        div#onevalue{
            background-image:linear-gradient(to right, rgba(12, 88, 5, 0.3), rgb(12, 88, 5, 1));
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Gradient with transparency</p></b>
    </div>
</body>
</html>

Linear gradient with transparency property in css

Rainbow creation with linear gradient

After studying the above gradients, we are now in a state to create rainbow with the use of gradient. Let us write a code of rainbow.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:500px;
            width:200px;
        }
        div#onevalue{
            background-image:linear-gradient(to top, violet,indigo, blue,green, yellow, orange, red);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Rainbow with gradient</p></b>
    </div>
</body>
</html>

Rainbow creation with linear gradient, www.programmingtutorial.in

Repeating gradient in CSS

Till now the gradients are created without repeating color stop. If you want to repeat gradient in your web page, then use repeating gradient property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:200px;
            width:500px;
        }
        div#onevalue{
            background-image:repeating-linear-gradient(orange, red 10%,yellow 20%);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Repeating gradient</p></b>
    </div>
</body>
</html>

Repeating gradient in CSS, www.programmingtutorial.in

Radial gradient in CSS

We have seen linear gradients spread color linearly (top to bottom or from left to right or diagonally). But, if you want to spread color starting from a single point and spread outward in a circular or elliptical form, then you can use radial gradient. In a radial gradient color emerge from a single point and smoothly spread outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients. The basic syntax of radial gradient is given below:

radial-gradient(shape size at position, color-stop1, color-stop2, …);

The radial gradient-by default takes, shape as ellipse, size as farthest-corner, and position as center. There are different types of radial gradient which you can use in your code:

Evenly spaced radial gradient

In evenly spaced gradient, the colors scatter by following evenly spaced structure. Let us understand this concept with the help of example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:300px;
            width:300px;
        }
        div#onevalue{
            background-image:radial-gradient(orange, red,yellow);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Evenly spaced Radial gradient</p></b>
    </div>
</body>
</html>

Evenly spaced color stops, www.programmingtutorial.in

Differently spaced radial gradient

In differently spaced radial gradients, we use colors with different percentage value to make its range unique. Let us write a code of differently spaced radial gradients:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:300px;
            width:300px;
        }
        div#onevalue{
            background-image:radial-gradient( orange 10%, red 20%, yellow 30%, green 40% );
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Differently spaced Radial gradient</p></b>
    </div>
</body>
</html>

Differently spaced radial gradient, www.programmingtutorial.in

Setting shape in radial gradient

The shape argument of radial gradient function allows you to define shape of the gradient. It takes the shape as circle or ellipse. Lets have an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:300px;
            width:600px;
        }
        div#onevalue{
            background-image:radial-gradient(ellipse, orange, red, yellow);
        }
    </style>
</head>
<body>
    <div class="container" id="onevalue">
        <b><p>Radial gradient with ellipse shape</p></b>
    </div>
</body>
</html>

Setting shape in radial gradient, www.programmingtutorial.in

Setting different size in css

The size parameter defines the size of gradient. It takes four values as closest-side, farthest-side, closest corner and farthest corner. Let us write a combined code for these four values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:150px;
            width:400px;
        }
        div#first{
            background-image: radial-gradient(closest-corner at 70% 50%, red, yellow,pink);
        }
        div#second{
            background-image: radial-gradient(farthest-corner at 40% 50%, red, yellow, pink);
        }
        div#third{
            background-image: radial-gradient(closest-side at 40% 50%, red, yellow, pink);
        }
        div#fourth{
            background-image: radial-gradient(farthest-side at 60% 50%, red, yellow, pink);
        }
    </style>
</head>
<body>
    <div class="container" id="first">
        <b><p id="pos1">Closest-corner radial gradient with ellipse shape</p></b>
    </div>
    <div class="container" id="second">
        <b><p id="pos2">Farthest-corner radial gradient with ellipse shape</p></b>
    </div>
    <div class="container" id="third">
        <b><p id="pos3">Closest-side radial gradient with ellipse shape</p></b>
    </div>
    <div class="container" id="fourth">
        <b><p id="pos4">Farthest-side radial gradient with ellipse shape</p></b>
    </div>
</body>
</html>

Setting different size in css, www.programmingtutorial.in

Repeating radial gradient in CSS

Like repeating linear gradient property, radial gradient also provides the functionality of repeating radial gradient. Let us take an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient property</title>
    <style>
        .container{
            height:300px;
            width:300px;
        }
        div#first{
            background-image: repeating-radial-gradient( red, yellow 10%,pink 10%);
        }
        
    </style>
</head>
<body>
    <div class="container" id="first">
        <b><p id="pos1">Repeating radial gradient</p></b>
    </div>
    
</body>
</html>