How to Make Cool Backgrounds for HTML With CSS

I made this Instructables because I wanted people to know how to make cool gradients in HTML, maybe to put in their website if they have one. Sometimes whenever I am making a little webpage (which I do WAY too often [I probably made at least 50 in the last 3 months]), I think, "This background is too boring!" So then, I make a gradient background like this one. I might use the same general colors that the site already had, or some completely different ones. I hope this tutorial helps you!

1. Computer
2. Text editor
3. I don't know

To start your CSS (Cascading Style Sheets), type in

Once that's done, you are ready for the next step.

/* You don't need to use an image for this step, because it is much more convenient to use code. The reason this step is called "Adding the Image" is because we use the background-image tag. */

Next, add this tag:

Put it inside of the body tag.

There are 3 different types of gradients:

1. Linear
2. Radial
3. Conic

They each look different. Linear has colors going in a straight direction, starting at one side and ending at the other. Radial has colors expanding out from a center point in a circle shape. Conic has colors rotating around a center point.

Before the parentheses, type in this code:

Change the [EXAMPLE] to linear, radial, or conic.

Inside the parentheses, type in this code:

Replace the [EXAMPLE]s with RGB codes, Hex codes, or the color names.

If you are making a linear gradient, you need to tell the computer which direction it should point. For this, you can use either directions (top, bottom, left, right), or you can use angles (0, 90, 180, 270).

Directions:

Inside the parentheses, before the colors, type in this code:

Change the [EXAMPLE] to one of these directions:

1. top
2. bottom
3. left
4. right
5. top-left
6. top-right
7. bottom-left
8. bottom-right

Angles:

Inside the parentheses, before the colors, type in this code:

Change the [EXAMPLE] to any number, which will be the angle in degrees that the gradient is pointing in.

If you notice, linear and conic gradients don't fade back into the first color in your list when they reach the end. If you want it to fade into the first color again, just simply add this code at the end of all your colors:

And change the [EXAMPLE] to the first color on your list.

If you want there to be a transparent color stop in your gradient, add this code where you want it to be:

Change the [COLOR]s to RGB numbers.

And change the [EXAMPLE] to either 0 or 1, 0 being fully transparent and 1 being fully visible.

Your new background is finished! I hope you found this tutorial helpful.