Understanding CSS Gradient

Gradient, Shadow and Filter

In this lesson, we will learn about CSS gradient, its main types and how to use it in CSS.

CSS Gradient

The CSS gradient allows you to create smooth color transitions on your web pages. Think of it as a way to blend colors together, just like mixing paint on a canvas.

There are two main types of gradients in CSS and they are:

Linear Gradient
Radial Gradient

Linear Gradient

The Linear gradient is used to create a smooth transition between colors in a straight line.

Imagine you have a straight line, like a road. Now, let's say you want to paint this road with two colors, like going from blue to green. The linear-gradient function helps you achieve this effect.

Syntax

background: linear-gradient(direction, color-stop1 position, color-stop2 position, ...);

In the above syntax, the direction specifies the direction or angle of the gradient. It can be values like to right, to left, or even in degrees like 45deg.

color-stop1 position, color-stop2 position, and so on represent the colors that you want to mix and positions in percent or length (like pixels) represents the amount till which the colors will spread. You can use color names, HEX codes, or RGB values. The color's position values are optional.

The list of values that can be used in direction are:

to top: It means move towards top (starting from bottom to top).
to bottom: It means move towards bottom (starting from top to bottom). It is the default position.
to left: It means move towards left (starting from right to left).
to right: It means move towards right (starting from left to right).
to top left: It means move towards top left corner (starting from bottom right corner to top left corner).
to top right: It means move towards top right corner (starting from bottom left corner to top right corner).
to bottom left: It means move towards bottom left corner (starting from top right corner to bottom left corner).
to bottom right: It means move towards bottom right corner (starting from top left corner to bottom right corner).

Example to top to bottom to left to right to top left to top right to bottom left to bottom right 20deg Multicolor Linear Gradient Repeating Linear Gradient

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to top, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

Radial Gradient

The Radial Gradient is used to create a smooth transition between colors in a circular or radial pattern.

Now, let's think of a radial gradient as if you were dropping paint on a piece of paper and watching it spread from a central point. This is exactly what radial-gradient does in CSS.

Syntax

background: radial-gradient(shape size at position, color-stop1 position, color-stop2 position, ...);

In the above syntax, the shape determines the shape of the gradient, like:

circle
ellipse

The size defines the size of the gradient shape, like:

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

The at position specifies the position of the gradient's center. The position can be in written terms of x and y coordinates in form of percent, pixel, or position names like:

at 80% 30%
at 50px 80px
at top left
at top right
at bottom left
at bottom right
at top center
at bottom center
at left center
at right center
at center center

The rest of the values are same as you have seen in the liner-gradient function.

Example circle ellipse closest-side closest-corner farthest-side farthest-corner at 80% 30% at 50px 80px at top left at top right at bottom left at bottom right at top center at bottom center at left center at right center at center center Multicolor Radial Gradient Repeating Radial Gradient

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

Previous Next

For over a decade, Dremendo has been recognized for providing quality education. We proudly introduce our newly open online learning platform, which offers free access to popular computer courses.

Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to top, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to bottom, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to left, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to top left, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to top right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to bottom left, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to bottom right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(20deg, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: linear-gradient(to bottom left, yellow, red, orange, blue, cyan, green);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Repeating Linear Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: repeating-linear-gradient(to right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(ellipse, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle closest-side, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle closest-corner, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-corner, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at 80% 30%, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at 50px 80px, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at top left, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at top right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at bottom left, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at bottom right, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at top center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at bottom center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at left center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at right center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle farthest-side at center center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: radial-gradient(circle, yellow, red, orange, blue, cyan, green);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Repeating Radial Gradient Example</title>

    <!-- Internal CSS -->
    <style>
        .gradient-box {
            width: 250px;
            height: 180px;
            background: repeating-radial-gradient(circle farthest-side at center center, yellow 40%, red 60%);
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>

Understanding CSS Gradient

CSS Gradient

Linear Gradient

Radial Gradient

Our Courses

News Updates