Working With CSS Gradients

One of the fantastic features that HTML5 has made available to web developers is the ability to establish gradients using CSS3. This feature has enabled the use of gradient effects for backgrounds instead of images. This article will explain what a gradient is, the different types of CSS gradients, and several ways you can use these gradients to create unique backgrounds for your websites. In addition, you’ll learn some tools for generating CSS gradients. So, let's delve into it!

What Are Gradients?

Gradients are a visual effect that appears as a gradual blend or change from one color into another. CSS gradients help you to build a smooth transition between the colors.

Why Use Gradients?

There are several reasons we use gradients:

• To create an exciting user interface for our web pages.

• To allow us the privilege of being creative; we can make attractive and captivating designs by blending colors.

• To increase depth and dimension in our web page backgrounds instead of creating designs that look flat.

• To bypass the general rule of avoiding the use of more than two or three colors.

• To help draw attention to our websites.

Types of CSS Gradients

All gradients have a central point where the color begins to blend into others. We will be looking at three different types of CSS gradients:

CSS Linear Gradient: This is the most common type of gradient and requires the direction and starting points of transition for the gradient effect. It uses two or three colors that blend evenly in a straight line. The color transition can go left, right, up, down or diagonally. Two colors are commonly used in linear gradients, although more than two colors can work, too.

CSS Radial Gradient: This type of gradient starts at one point that radiates outward. The color begins at the element's center and fades at an equal rate as it transitions outward in all directions. The shape of the radial gradient is, by default, elliptical.

CSS Conic Gradients: In this type of gradient, the focal point is rotated around the center. The center starts by default at 50%, faces upwards, and the color stops are evenly spaced. However, you can change the proportion of the color stops as well as the starting position. Conic gradients are helpful in pie charts. Also, conic gradients are similar to radial gradients as they are circular and use their element's center as the point for color stops. The difference is that the color stops of the radial gradient arise from the circle's center, while the conic gradient has its color stops around the circle.

How Gradients Work in CSS

CSS gradients make use of background-image. In CSS, you can control every area of how gradients work, from the colors and their transitions to directions. In addition, the gradients use a CSS function to allow many color transitions. The colors can take different formats like HEX, HSLA, RGBA, or named colors.

In order to understand how gradients work, there are several points to consider:

• You must be intentional when choosing colors because not all colors go well together. Learn more about choosing colors here.

• To avoid a grayish center, choose three colors instead of two.

• The colors must blend well enough that users cannot see where the transition occurred.

• You need to understand the different types of gradients to know how gradients work in CSS.

Now, let’s look at the different properties of CSS gradients, with examples.

Linear Gradient Effects Properties

We identify linear gradients using the linear-gradient() function in the background or background-image property, and it must include two or more color values. The default setting of linear gradients is from top to bottom of the element, giving a smooth transition from the first color value to the second. However, we can change this direction with keywords or define degree values before color values. Here are some of the effects linear gradients can have:

Top to Bottom (Default): This is the default effect of linear gradients and describes a linear gradient with the starting point at the top, ending at the bottom.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-style: italic;
            font-weight: bold;
            padding: 90px;
            height: 200px;
            background-color: brown;
            background-image: linear-gradient(red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>Linear Gradient - Top to Bottom</h1>
    <p>A linear gradient with red transitioning smoothly into yellow and yellow into green:</p>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result:

This default effect of a linear gradient shows how three different colors transition smoothly from top to bottom.

Left to Right: This property shows a color transition from the left to the right.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            font-style: italic;
            height: 200px;
            background-color: red;
            padding: 90px;
            background-image: linear-gradient(to right, red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>Linear Gradient - Left to Right</h1>
    <p>A linear gradient with red transitioning smoothly from the left to yellow and green to the right</p>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result:

Observe how the transitioning flows from left to right.

Diagonal: This shows a diagonal transition from top-left to bottom-right:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-weight: bolder;
            font-style: italic;
            height: 200px;
            background-color: red;
            padding: 90px;
            background-image: linear-gradient(to bottom right, red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>Linear Gradient - Diagonal</h1>
    <p>A linear gradient with red transitioning smoothly from the top-left to yellow and green to the bottom-right</p>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result:

Angles: With this property, you can implement different directions by setting an angle instead of using predefined directions like the ones discussed above (top, bottom, left, right, etc.).

Various angles have different effects. With gradient angles, the starting point of 0 degrees is equal to the top, and at each 90 degree interval in a clockwise circle is represented accordingly. For example, 180 degrees would be the bottom. In addition, you can transition colors from the zero starting point in positive or negative angles. A positive angle moves the gradient in a clockwise direction, while a negative angle moves it counterclockwise.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy1 {
            font-size: 35px;
            padding: 30px;
            height: 100px;
            background-color: red;
            background-image: linear-gradient(0deg, red, yellow, green);
        }
        .icy2 {
            font-size: 35px;
            padding: 30px;
            height: 100px;
            background-color: red;
            background-image: linear-gradient(90deg, red, yellow, green);
        }
        .icy3 {
            font-size: 35px;
            padding: 30px;
            height: 100px;
            background-color: red;
            background-image: linear-gradient(180deg, red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>Linear Gradients - Using Different Angles</h1>
    <div class="icy1" style="text-align:center">0 degree</div>
    <br>
    <div class="icy2" style="text-align:center">90 degree</div>
    <br>
    <div class="icy3" style="text-align:center">180 degree</div>
    <br>
</body>
</html>

Save this code

Here is result:

Transparency Effect: You can also use CSS linear gradients to create a fading effect. To use transparency, the rgba() function plays a role in defining color stops, and the value 0 to 1 specifies the transparency of the color. A value of 0 shows full transparency, while 1 shows fully opaque color, with no transparency.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            padding: 90px;
            height: 200px;
            background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 255, 0, 1), rgba(0, 128, 0, 0));
        }
    </style>
</head>
<body>
    <h1>Linear Gradient - Transparency</h1>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result:

Repeating Linear Gradient: This property makes it possible to use multiple linear gradients with a single function.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy1 {
            height: 200px;
            background-color: red;
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
        }

        .icy2 {
            height: 200px;
            background-color: red;
            background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);
        }
    </style>
</head>
<body>
    <h1>Repeating Linear Gradient</h1>
    <div class="icy1"></div>
    <p>A repeating gradient with 0 degrees starting red and ending with green:</p>
    <div class="icy2"></div>
    <p>A repeating gradient with 90 degrees starting red and ending with green:</p>
</body>
</html>

Save this code

Here is the result:

Radial Gradient Effects Properties

Radial gradients use the radial-gradient() function in background or background-image property instead of the linear-gradient() function. This effect’s properties include the following:

Evenly Spaced (Default): This is the default effect of a radial gradient, and creates evenly spaced color stops, as shown below.

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-style: italic;
            height: 200px;
            width: 800px;
            background-image: radial-gradient(red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>The Default Effect of Radial Gradient - Evenly Spaced Color Stops</h1>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result. Notice how all the color stops are evenly distributed:

Differently Spaced: This effect allows for radial gradients with color stops of varying spaces.

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            font-style: italic;
            height: 200px;
            width: 800px;
            background-image: radial-gradient(red 10%, yellow 20%, green 50%);
        }
    </style>
</head>
<body>
    <h3>Radial Gradient with Different Color Stops Spacing</h3>
    <div class="icy">Icyqueen</div>
    <div id="grad1"></div>
</body>
</html>

Save this code

Here is the result:

Observe the different spacing of the color stops, with green being larger than others. This is because green has 50% of the gradients.

Repeating Radial Gradient: This property makes it possible to replicate radial gradients with the repeating-radial-gradient() function, as shown below.

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-weight: bold;
            font-size: 35px;
            height: 200px;
            width: 800px;
            background-color: red;
            background-image: repeating-radial-gradient(red, blue 10%, yellow 5%, green 15%);
        }
    </style>
</head>
<body>
    <h1>Repeating Radial Gradient</h1>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

Here is the result:

Conic Gradient Effects Properties

The gradient effects for conic gradients include the following:

Multiple Color Conic Gradients: The example below shows a conic gradient with many colors. Notice how four different colors show a conic gradient effect with the color stops around it.

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            text-align: center;
            font-size: 35px;
            font-style: italic;
            font-weight: bold;
            height: 200px;
            width: 300px;
            background-color: red;
            background-image: conic-gradient(red, yellow, green, blue);
        }
    </style>
</head>
<body>
    <h1>Multiple Color Conic Gradient</h1>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

See the result:

Repeating Conic Gradients: A repeating-conic-gradient() function is what you use to show the following effect. Notice how repeated color gradients show a conic gradient effect with many color starts and stops.

<!DOCTYPE html>
<html>
<head>
    <style>
        .icy {
            height: 200px;
            width: 200px;
            background-color: red;
            background-image: repeating-conic-gradient(
                red 0deg 10deg, 
                yellow 10deg 20deg, 
                blue 20deg 30deg, 
                green 30deg 40deg
            );
            border-radius: 50%; /* Makes it circular */
        }
    </style>
</head>
<body>
    <h1>Repeating a Conic Gradient</h1>
    <div class="icy">Icyqueen</div>
</body>
</html>

Save this code

See the result:

CSS Gradient Generator Tools

Sometimes it can be tedious working with CSS gradients manually, especially if you’re new to them. Thankfully, some CSS gradient generator tools allow you to use CSS gradients with ease. These tools perform different functions and have a variety of features. Here are some CSS gradient generator tools to explore:

Colorspace: This tool initially used two color generators, but a Beta feature of generating three color gradients has been added. With this tool, you can play with the colors to get the desired gradient effect, and then copy the generated CSS code for your project. This tool only generates linear gradients, but you can use the CSS colors in radial and conic gradients.

Vivid Gradient Generator Tool: This CSS gradient tool allows you to generate three different color systems (HCL, HSB and HSL). In addition, you can also export a gradient as an SVG image and develop any of the three CSS gradient types by simply clicking "Copy CSS."

Gradient Generator: This tool uses an easing curve for color distribution control, but it only has the linear gradient feature. You can copy the CSS code for the gradient you create.

Online Gradient Generator: This is an excellent tool; you can blend two or more colors smoothly. In addition, you can generate four types of gradients with it: linear, radial, elliptical and conical. You can also generate CSS code and download the image of the gradient.

Conclusion

You can now use the CSS gradients effortlessly. Try using them in your projects regularly and see the fantastic things you can create. Explore these tools to master CSS gradients for your new designs.