Basic Gradients in CSS

If you’ve ever wanted to create a colorful gradient on your webpage, you can do so with gradients in CSS! Gradients are a fun way to create backgrounds that have a blend of two or more colors.

Here are a few examples of gradients:

In this tutorial, we will be learning how to create a simple, top to bottom gradient blurred gradients, as well as solid stripes!

Gradients: An Overview

Gradients can occur in multiple directions: left to right, top to bottom, right to left, and even radiating from the center out. You can also add multiple colors to a gradient and they will blend seamlessly from one to another.

The goal of this lesson is to create a fluid and blended color gradient in a small box div.

To start, we will create the element we want to style: <div class =”gradient”> in our HTML file. In the CSS stylesheet we will style this div to have a height: 200px and width 200px, as well as a thin border, to see it more clearly. Let’s take a look at the example:

Our goal from here on out is to create a gradient within the box element above!

Linear Gradient

By default, linear gradients will go from top to bottom. Use linear-gradient in your CSS stylesheet to indicate that you are adding a gradient to the div.

Linear gradient code:

element{
background-color: linear-gradient(color 1, color 2);
}

and in our example:

.gradient{
background-color: linear-gradient(color1, color2);
}

Now, where we have color 1 and color 2, we will add the colors!

Linear Gradient Two Colors

The first color value (color 1) placed within the linear-gradient style function will be at the top of the element, and the second (color 2) will begin halfway down the element.

In the example below, we have added the yellow as color 1 and green as color 2.

Let’s take a look at how it renders:


Yellow takes the top 45% of the div and blends into the green for roughly 10% of the middle of the div followed by purely green for the rest of the div.

Linear Gradients: Three Colors

Similar to the two-color gradient, you can create three-color gradients in CSS. Each color which will take up roughly one-third, or 33% of the div.

The syntax for a three-color gradient is the same as a two-color, plus the addition of the third color, like so:

element{
background-color: linear-gradient(color 1, color 2, color 3);
}

and in our example:

.gradient{
background-color: linear-gradient(yellow, white, green);
}

When rendered, you’ll see that yellow takes roughly the top 26%, blends with white for about 10%. Then, white takes up roughly 26%, blends with green for 10% and then green for the rest!

Feel free to play around with the color combinations on your own – the options are endless!

Linear Gradients: Adjusting Gradient Positioning

Now that we know how to create equally distributed color gradients in CSS, let’s take a look at how to modify the positioning of the gradients.

In this lesson, we will learn how to increase the length of the top yellow part of the gradient. The syntax of the code looks like this:

element{
background-color: linear-gradient(color 1 endposition%, color 2);
}

and in our example:

.gradient{
background-color: linear-gradient(yellow 70%, green);
}

Check it out:

Which when rendered, looks like this:

Feel free to play around with the positioning of the colors!

Modifying three-color positioning

You can also modify the positioning of multiple colors in your element. This allows you to really customize the gradient to your liking.

element {
background: linear-gradient(color1 %endpoint, color2 %endpoint, color3 %endpoint);
}

and in our example:

.gradient {
background: linear-gradient(yellow 33%, white 66%, green 99%);
}

Let’s take a look at this in our code editor:

And when rendered:

The first color, yellow will end at the 30% mark, blend into the second color, white, and then the second color, white will end at the 50% mark. The green color will take up the rest of the element.

Linear Gradients as Stripes

Now that we’ve learned how to create blended gradients in an element, let’s take a look at how to create stripes. The concept is similar to that of the blended gradient, we are just going to take out the blending! To do this, we will add the same endpoint to each color.

To create a striped background, we will use the following code:

element {
background: linear-gradient(color1 50%, color2 50%);
}

and in our example, it will look like this:

.gradient {
background: linear-gradient(yellow 50%, green 50%);
}

Let’s take a look:

And when rendered:

Three stripes:

To create three stripes within your div, you will have to add a start and endpoint to the middle color.

Here’s what the code will look like:

element {
background: linear-gradient(color1 %endpoint, color2 %startpoint %endpoint, color3 %endpoint);
}

and in our example:

.gradient {
background: linear-gradient(yellow 33%, white 33% 66%, green 66%);
}

Adding a start point to the middle color will create a solid end line between the first and second color. Adding the endpoint to the middle color will create a solid end line between the second and third color.

Let’s take a look at this code in our editor:

And when rendered:

Summary:

Now that you know how to create both simple gradients in CSS as well as stripes, you can add these background to various elements in your website! They don’t just have to be a background for a <div>, they can be added to any elements.

Leave a Comment!