Color is a major focus of web design. Setting a background color on a page can change a lot about how it impacts the user. Choosing the right color can help make or break that experience.
Instead of having to accept a solid color background, you can create stunning visual effects with CSS Gradient Colors. Even better, you don’t need to use an image to create this.
There are multiple gradient controllers that allow for creative design with truly unlimited capability for pure expression. This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
The Essentials of Gradient Colors
There are four types of gradient controllers you need to be aware of:
- Linear gradients
- Radial gradients
- Color stops
- Repeating gradients
Linear Gradients
Linear Gradients (Top to Bottom)
Let’s start with an HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Creating Beautiful Color Gradients</h1>
</body>
</html>
Now that you have the basic HTML page, let’s dive right in and create some color gradients.
We are going to add a div element so that we can play within a specific space.
<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 200px; width: 500px;
background-image: linear-gradient(blue, yellow);
}
</style>
</head>
<body>
<h1>Creating Beautiful Color Gradients</h1>
<div id="gradient1"></div>
</body>
</html>
The default when adding a linear gradient is top to bottom. This is important to note. Notice the blue fading into the yellow at the bottom.
Linear Gradients (left to Right)
To change direction from top to bottom and have your gradient go from left to right, you will need to modify your CSS.
A simple modification makes all the difference. Now you have blue fading into yellow from left to right.
#gradient1 {
height: 200px; width: 500px;
background-image: linear-gradient(to right, blue, yellow);
}
Linear Gradients (Diagonal)
You can make a gradient run in a diagonal direction by specifying both the horizontal and vertical starting positions.
. Now you have blue fading into yellow from left to right.
#gradient1 {
height: 200px; width: 500px;
background-image: linear-gradient(to bottom right, blue, yellow);
}
The following example shows a linear gradient that starts at top left (and goes to bottom right). Look at the blue transition into the yellow in the lower right.
Linear Gradients (Angles)
With linear gradient angles, you can determine the exact angle and direction of your gradient flow.
Another minor change to the CSS will allow you to do this.
#gradient1 {
height: 200px; width: 500px;
background-image: linear-gradient(135deg, blue, yellow);
}
Radial Gradients
Another interesting effect is the radial gradient. Simply modify the code with the following adjustments. Let’s use three colors and let’s also specify the shape.
#gradient1 {
height: 200px; width: 500px;
background-image: radial-gradient(circle, blue, yellow, green);
}
Radial gradients provide an unusual effect.
Color Stops
Color stops allow multiple colors to transition into each other. Simply modify the code to use multiple colors.
#gradient1 {
height: 200px; width: 500px;
background-image: linear-gradient(red, blue, green);
}
The following example shows a linear gradient (from top to bottom) with these multiple color stops.
As you can see, you can play with these colors forever and find some interesting color transitions.
Repeating Gradients
Another interesting layout with color gradients is repeating gradients. This, as you would suspect, creates an effect that repeats itself from top to bottom. Let’s try a new piece of CSS code. Note that you will need to add a percentage for some of the colors.
#gradient1 {
height: 200px; width: 500px;
background-image: repeating-linear-gradient(red, blue 10%, green 20%);
}
The result is something pretty wild.
Repeating Gradients + Radial Gradients
For the grand finale, let’s put the repeating gradient together with the radial gradient. To do this, add both items of code into the same line of CSS.
#gradient1 {
height: 200px; width: 500px;
background-image: repeating-radial-gradient(blue, yellow 10%, green 20%);
}
The result is something spectacular.
Final Note
As you can see, the color gradients allow for some stunning interactive color combinations and backgrounds for your web pages. You will need to determine the layout you want to use and play with the color combinations, color stops, directional components, and spirals. In the end, always ask yourself what is the most pleasing to the eye. Be creative in your layouts and don’t be afraid to play.
Where to Next?
This CSS color gradients introduction should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
