EN
CSS - linear gradients
0 points
In this article, we would like to show you how to create linear gradients using CSS.
Quick solution:
xxxxxxxxxx1
div {2
background: linear-gradient(yellow, green);3
}
In this section, we present three simple multi-color linear gradients.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin-top: 10px;8
height: 50px;9
width: 100%;10
}11
12
.gradient1 {13
background: linear-gradient(yellow, green);14
}15
16
.gradient2 {17
background: linear-gradient(yellow, purple, red);18
}19
20
.gradient3 {21
background: linear-gradient(red, yellow, green, blue);22
}23
</style>24
</head>25
<body>26
<div class="gradient1"></div>27
<div class="gradient2"></div>28
<div class="gradient3"></div>29
</body>30
</html>To turn gradients, you need to specify the value in degrees (e.g 45deg) or float number with turn keyword (e.g 0.25turn).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin-top: 10px;8
height: 50px;9
width: 100%;10
}11
12
.gradient1 {13
background: linear-gradient(0.25turn, yellow, lightgreen);14
}15
16
.gradient2 {17
background: linear-gradient(.25turn, yellow, purple, red);18
}19
20
.gradient3 {21
background: linear-gradient(45deg, red, yellow, green, blue);22
}23
</style>24
</head>25
<body>26
<div class="gradient1"></div>27
<div class="gradient2"></div>28
<div class="gradient3"></div>29
</body>30
</html>In this section, we present how to use different syntax to create custom linear gradients.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin-top: 10px;8
height: 50px;9
width: 100%;10
}11
12
.gradient1 {13
/* from bottom-right to top-left corner,14
starting green and finishing yellow */15
background: linear-gradient(to left top, green, yellow);16
}17
18
.gradient2 {19
/* from top to bottom, starting yellow, turning 20
purple at 30% of the elements length, finishing red */21
background: linear-gradient(yellow, purple 30%, red);22
}23
24
.gradient3 {25
/* the same as gradient2 but tilted 45 degrees */26
background: linear-gradient(45deg, yellow, purple 30%, red);27
}28
</style>29
</head>30
<body>31
<div class="gradient1"></div>32
<div class="gradient2"></div>33
<div class="gradient3"></div>34
</body>35
</html>