EN
CSS - radial gradients
0 points
In this article, we would like to show you how to create radial gradients using CSS.
Quick solution:
xxxxxxxxxx1
div {2
background-image: radial-gradient(start-color, ... , end-color);3
}
In this example, we create three simple multi-color radial gradients using background: radial-gradient(); CSS property.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
body{ display: flex }6
7
div {8
margin: 10px;9
height: 100px;10
width: 100px;11
}12
13
.gradient1 {14
background: radial-gradient(yellow, green);15
}16
17
.gradient2 {18
background: radial-gradient(yellow, purple, red);19
}20
21
.gradient3 {22
background: radial-gradient(red, yellow, green, blue);23
}24
</style>25
</head>26
<body>27
<div class="gradient1"></div>28
<div class="gradient2"></div>29
<div class="gradient3"></div>30
</body>31
</html>To set the color stop, simply specify the percentage value (e.g 50%) or length (e.g 25px) right after the color.
Note:
A percentage of
0%, or a length of0, represents the center of the gradient.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
display: flex8
}9
10
div {11
margin: 10px;12
height: 100px;13
width: 100px;14
}15
16
.gradient1 {17
background: radial-gradient(yellow, green 25px);18
}19
20
.gradient2 {21
background: radial-gradient(yellow 10%, purple 20%, red 60%);22
}23
24
.gradient3 {25
background: radial-gradient(red 20%, yellow 30%, green 40%, blue);26
}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>The radial gradient can be an ellipse (default value) or circle. To make it a circle, you need to specify it before gradient colors.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
display: flex8
}9
10
div {11
margin: 10px;12
height: 75px;13
width: 200px;14
}15
16
.ellipse {17
/* ellipse is a default value */18
background: radial-gradient(yellow, purple, red);19
}20
21
.circle {22
background: radial-gradient(circle, yellow, purple, red);23
}24
25
</style>26
</head>27
<body>28
<div class="ellipse"></div>29
<div class="circle"></div>30
</body>31
</html>In this section, we create some custom radial gradients for round div elements to achieve ball effect.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
body {6
display: flex;7
}8
9
div {10
height: 100px;11
width: 100px;12
border: 2px solid black;13
border-radius: 50%;14
margin: 10px;15
box-shadow: 10px 5px 5px #BEBEBE;16
}17
18
.ball-1 {19
background: radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac);20
}21
22
.ball-2 {23
background: radial-gradient(circle at top, yellow, transparent),24
radial-gradient(ellipse at bottom, red, transparent); 25
}26
27
.ball-3 {28
background: radial-gradient(ellipse at top, lightblue, transparent),29
radial-gradient(circle at bottom, black 50%, transparent); 30
}31
32
</style>33
</head>34
<body>35
<div class="ball-1"></div>36
<div class="ball-2"></div>37
<div class="ball-3"></div>38
</body>39
</html>