I'm sure you are so familiar and often hear about the gradient color. Some people also know the gradient as a color transition. You can also apply the gradient colors to the elements on your web page by using CSS3.
Before we start to learn about the CSS3 Gradients, you should know, there are two types of gradient colors. The first is linear-gradient, and the second is radial-gradient. Linear or radial gradient is not a CSS3 property, but that is a value for the background-image property.
Now, in this tutorial, you'll learn how to use CSS3 Gradient Colors value into the elements of your web page. Let's Begin!
CSS Linear Gradient
To create a linear gradient, you must define at least two different color values. You can also use a color stop to specify the proportion of the color to render smooth transitions as you want.
You can use the following syntax to create a linear gradient:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);You can set a starting point, direction, or angle along with the gradient effect. By default, the starting point of the CSS3 linear-gradient is top to bottom.
To make it easier to understand, let's implement it by example.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="linear-grad">
<section>
<p>Linear Gradient - Top to Bottom (this is default)</p>
<p>You don't need to set the starting point</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.linear-grad {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
background-image: linear-gradient(blue, lightblue);
}Result:
You can also use the RGB, HSL, or Hexadecimal color values with or without alpha.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="linear-grad-2">
<section>
<p>Linear Gradient - Top to Bottom (this is default)</p>
<p>This is a linear-gradient with the color name, RGBA, and Hexadecimal.</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.linear-grad-2 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
background-image: linear-gradient(blue, rgb(7, 136, 179, 1), #bbb4ff);
}Result:
Here's another example of CSS3 linear-gradient by setting the starting point:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="linear-grad-3">
<section>
<p>Linear Gradient - Left to Right</p>
</section>
</div>
<div class="linear-grad-4">
<section>
<p>Linear Gradient - Diagonal</p>
</section>
</div>
<div class="linear-grad-5">
<section>
<p>Linear Gradient - Using Angle</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.linear-grad-2 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
background-image: linear-gradient(blue, rgb(7, 136, 179, 1), #bbb4ff);
}Result:
Here's another example of CSS3 linear-gradient by setting the starting point:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="linear-grad-3">
<section>
<p>Linear Gradient - Left to Right</p>
</section>
</div>
<div class="linear-grad-4">
<section>
<p>Linear Gradient - Diagonal</p>
</section>
</div>
<div class="linear-grad-5">
<section>
<p>Linear Gradient - Using Angle</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.radial-grad {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
background-image: radial-gradient(blue, lightblue);
}Result:
You can also use different color stops to specify the proportion of the color by adding a percentage or a pixel.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="radial-grad-2">
<section>
<p>Radial Gradient - Differently Spaced Color Stops</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.radial-grad-2 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
background-image: radial-gradient(blue 30%, rgb(7, 136, 179, 1) 70%);
}Result:
You can also use the shape parameter to define the shape:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="radial-grad-3">
<section>
<p>Radial Gradient - Set Shape</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.radial-grad-3 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
height: 200px;
background-image: radial-gradient(circle, blue 30%, rgb(7, 136, 179, 1) 70%);
}Result:
Here's a different size keyword that could be used on CSS3 radial-gradient:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Gradients</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="radial-grad-4">
<section>
<p>Radial Gradient - closest-side</p>
</section>
</div>
<br>
<div class="radial-grad-5">
<section>
<p>Radial Gradient - farthest-side</p>
</section>
</div>
<br>
<div class="radial-grad-6">
<section>
<p>Radial Gradient - closest-corner</p>
</section>
</div>
<br>
<div class="radial-grad-7">
<section>
<p>Radial Gradient - farthest-corner</p>
</section>
</div>
</body>
</html>- CSS
section {
margin: auto;
color: white;
}
.radial-grad-4 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
height: 100px;
background-image: radial-gradient(closest-side at 30% 70%, green, rgb(70, 240, 107));
}
.radial-grad-5 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
height: 100px;
background-image: radial-gradient(farthest-side at 70% 30%, green, rgb(70, 240, 107));
}
.radial-grad-6 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
height: 100px;
background-image: radial-gradient(closest-corner at 55% 70%, green, rgb(70, 240, 107));
}
.radial-grad-7 {
display: flex;
margin: auto;
padding: 25px;
max-width: 50%;
height: 100px;
background-image: radial-gradient(farthest-corner at 70% 55%, green, rgb(70, 240, 107));
}Result:
Ok, the tutorial about CSS3 Gradients has finished. That's just a basic of CSS3 Gradient usage. If you want to learn more about the CSS3 tutorial, you can find that in the next chapter.
You can also find the full source code of these examples on our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!