How to make a color gradient background using CSS and HTML
How to make a color gradient background using CSS and HTML
10 minutes to read | 12.05.2020
TL;DR We can use the CSS property linear-gradient() to create beautiful gradients with CSS. linear-gradient() is three CSS properties in one. Those are direction, transition, and color. Multiple linear-gradient() properties can be combine to create even more complex, colorful gradients. Gradients require practice, so messing around with CSS in the Developer Tools is a great way to learn more about how they work.
Sign up for free to share your own content!
*
*
*
Many of the visitors on Ninth Digital seem to like the blue and orange gradient background. Through our contact form, we get asked a lot to explain how we made it. Even using the Developer Tools color gradients can be hard to understand in CSS and can be hard to tackle by yourself. We want to make it easier to understand how to use gradients and teach you how to create a color gradient background with HTML and CSS. We will be using the CSS property linear-gradient(); to make this look awesome. With everything you'll learn today you'll be able to create your own custom backgrounds using gradients. We're going to create our gradient using three main parts: Direction, Transition, and Color. The basic formula: linear-gradient(direction, color transition, color transition); Direction The first part of the linear-gradient() property is direction. There are two different basic ways we can use to determine the direction of our gradient. We can use words or degrees. Using words We can use words to determine the direction of our color gradient. You choose the side you want to start from and you go towards the direction of the end. For example: We want our gradient to start on the left with blue and go towards the right and end with red. Blue | ----> | Red
stylesheet.css
.color-background { background: linear-gradient(to right, blue, red); }
Now, halfway between the left and the right, the color will start to shift from blue to red, leaving us with a nice little gradient.
The basic directions are to top, to bottom, to right, and to left. You can also use a second direction to start from corners, as well. For example, we can start our gradient from the bottom-left corner by using to top right. Using degrees With degrees, we can get a lot more specific about where we want our gradient to start from. Degrees have their equivalent of the words above. to top is equal to 0deg to bottom is equal to 180deg to right is equal to 90deg to left is equal to 270deg This might seem confusing at first, but the more you play around with the degrees the more you will start to understand it. Degrees are a lot more useful when you aren’t creating a gradient that can easily use words as a direction. For example, you want to start in the top-left corner and go towards the bottom-right corner. We can do this:
stylesheet.css
.color-background { background: linear-gradient(135deg, blue, red); }
How did we figure this out? Going from the top to the bottom is 180 degrees, and going from left to right is 90 degrees. Using some math, we can figure out that going from the top-left corner to the bottom-right corner is 135 degrees. When customizing your own gradient, you can use any start value between 0 and 360 degrees. Increasing the degree value will rotate the to-direction clockwise, starting and ending at the bottom. Use this handy little guide we created:
Transition The second part of the linear-gradient() CSS property is transition. A percentage is used to show when the color should make the transition to the next color. There will be at least two percentages. One for the start of the transition, and one for the end of the transition. You can also leave them empty. If you don’t specifically include percentages, the browser will default to keeping the gradient evenly distributed to each color. In our code above, you will start to notice the color shift about halfway through. The transition automatically starts at 0% and is fully completed at 100%. Between 0% and 100% is where the transition is happening. However, we can change that, like this:
stylesheet.css
.color-background { background: linear-gradient(to right, blue 33%, red 66%); }
Now, the first third of our gradient will be solid blue. The blue will start transitioning to red at 33%, and be fully shifted to solid red at 66% and beyond. Our transition of colors happens only between our two percents, 33% and 66%. We can use as many percentages as we want to determine the transition, but the most important thing to remember is that the transition is made between each percent. Colors The final part of the linear-gradient() property is color. You have to include at least two colors with linear-gradient(). The first color is the start color, and the remaining colors will finish off the gradient. There are many ways to determine the colors of the gradient. We can use the name of the color. For example, like our code above, we can just use the words, ‘blue’, ‘orange’, ‘green’, ‘purple’, etc… We can use the hex code of the color. You can get more specific with hex codes. For example, our main orange color has a hex code of #FC9580, and the blue accent color has a hex code of #80E7FC. We can use the RGBA value of the color. The main benefit of using RGBA is that we can add opacity to our color giving us even more customization. For example, the orange RGBA value is rgba(252, 149, 128, 1) and the blue color is rgba(128, 231, 252, 1). The last number, 1 in this case, is the opacity. One color Even though we need to use two colors in a gradient, it doesn’t mean we can’t figure out a way to create a gradient with just one color. We transition the gradient from our color to transparency, like this:
stylesheet.css
.color-background { background: linear-gradient(90deg, rgba(252, 149, 128, 1), transparent); }
This will create a gradient using our orange color. The direction will go from left to right, starts out as a solid orange, and transitions towards transparency.
More colors! With three colors, we can make something like the flag of France, like this:
stylesheet.css
.color-background { background: linear-gradient(90deg, blue, white, red); }
We can add a couple of transition spots in there to change up the colors, like so:
stylesheet.css
.color-background { background: linear-gradient(90deg, blue 20%, white 50%, red 80%); }
Can you spot the difference? In the second example, the blue color doesn't transition until 20%, as opposed to the first example where we use the default transition of 0%. It makes the blue a lot more solid in the second example. You can use the same logic to figure out why the red is more solid in the second example. Combining multiple gradients We can combine more than one linear-gradient() CSS property to create even more complex, yet beautiful color gradients. Here is an example:
stylesheet.css
.color-background { background: linear-gradient(225deg, rgba(199, 25, 57, 1), transparent 70%), linear-gradient(135deg, rgba(86, 199, 133, 1), transparent 70%), linear-gradient(315deg, rgba(186, 179, 39, 1), transparent 70%); }
To explain this a little bit, we have three separate color gradients that each go in a different direction and overlap with each other. Starting at 0%, each color begins its transition to transparency, and is completed at 70%, leaving the remaining 30% completely transparent, allowing for the other colors to show through. We are left with this autumn color.
You can have as many colors as you want, but too many colors won’t mix as well. Creating a custom color background using linear-gradient Now, we know a little bit more about color gradients. How do we design a color gradient background for our website? We will need to use both HTML and CSS to make this happen. We want our background to appear behind everything, so we need to keep that in mind. We need to include direction, transition, and color. Here’s how we can accomplish this:
application.html
<!DOCTYPE html> <html> <head></head> <body> <div class="color-background"></div> <!-- The rest of your code and content goes here! --> </body> </html>
stylesheet.css
.color-background { width: 100%; height: 500px; position: absolute; z-index: -1; background: linear-gradient(to top, white, transparent), linear-gradient(to right, rgba(199, 25, 57, 0.75), rgba(186, 179, 39, 0.75)); }
The first linear-gradient() should match your website’s background color. In our case, it’s going to be white. We match our first gradient to our background color so the gradient blends seamlessly with our regular background color. The second gradient is the colors we wanted to use as the background. To keep things simple, we used the default transitions. Each gradient has a direction (using words), a transition (remember, if you don’t include percentages, you will automatically use the default), and a color (using words and the RGBA method). It looks like this:
This will get you a CSS color gradient background on your website! You can now customize the direction, transition, and colors to make it your own. - Summarize We learned a lot about the CSS property linear-gradient(), and all the different parts needed to create a custom color gradient background with CSS and HTML. The main things you need to learn how to use are direction, transition, and color and you are able to create beautiful gradients. The more you mess around with gradients the more you’ll understand them. All of the examples on this page are created using CSS, so you can use the Developer Tools to play around and tweak the gradients to learn more. Don’t forget to share this with someone who loves gradients!
Share this with your friends
Recent Posts
What is the best word count for a blog post to rank high in Google?
What is the best word count for a blog post to rank high in Google?
Internet Marketing | 2 minutes to read | 01.08.2021
Part of SEO and ranking high in the search engine results is word count. Should your blog posts be short? Medium? Long? What's the optimal word count for blog posts?
Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
Web Design | 8 minutes to read | 12.22.2020
Animations can bring your website to life, as well as give your design a touch of flair, but we don't want them to be crazy. Here's how to make basic hover animations with CSS.
View all posts