EN
CSS - linear gradients
0
points
In this article, we would like to show you how to create linear gradients using CSS.
Quick solution:
div {
background: linear-gradient(yellow, green);
}
1. Simple linear gradients
In this section, we present three simple multi-color linear gradients.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin-top: 10px;
height: 50px;
width: 100%;
}
.gradient1 {
background: linear-gradient(yellow, green);
}
.gradient2 {
background: linear-gradient(yellow, purple, red);
}
.gradient3 {
background: linear-gradient(red, yellow, green, blue);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>
2. Turned gradients
To turn gradients, you need to specify the value in degrees (e.g 45deg) or float number with turn keyword (e.g 0.25turn).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin-top: 10px;
height: 50px;
width: 100%;
}
.gradient1 {
background: linear-gradient(0.25turn, yellow, lightgreen);
}
.gradient2 {
background: linear-gradient(.25turn, yellow, purple, red);
}
.gradient3 {
background: linear-gradient(45deg, red, yellow, green, blue);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>
3. Custom linear gradients
In this section, we present how to use different syntax to create custom linear gradients.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin-top: 10px;
height: 50px;
width: 100%;
}
.gradient1 {
/* from bottom-right to top-left corner,
starting green and finishing yellow */
background: linear-gradient(to left top, green, yellow);
}
.gradient2 {
/* from top to bottom, starting yellow, turning
purple at 30% of the elements length, finishing red */
background: linear-gradient(yellow, purple 30%, red);
}
.gradient3 {
/* the same as gradient2 but tilted 45 degrees */
background: linear-gradient(45deg, yellow, purple 30%, red);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>