EN
CSS - radial gradients
0
points
In this article, we would like to show you how to create radial gradients using CSS.
Quick solution:
div {
background-image: radial-gradient(start-color, ... , end-color);
}
1. Simple radial gradients
In this example, we create three simple multi-color radial gradients using background: radial-gradient(); CSS property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body{ display: flex }
div {
margin: 10px;
height: 100px;
width: 100px;
}
.gradient1 {
background: radial-gradient(yellow, green);
}
.gradient2 {
background: radial-gradient(yellow, purple, red);
}
.gradient3 {
background: radial-gradient(red, yellow, green, blue);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>
2. Set color stop
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:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
display: flex
}
div {
margin: 10px;
height: 100px;
width: 100px;
}
.gradient1 {
background: radial-gradient(yellow, green 25px);
}
.gradient2 {
background: radial-gradient(yellow 10%, purple 20%, red 60%);
}
.gradient3 {
background: radial-gradient(red 20%, yellow 30%, green 40%, blue);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>
3. Shape
The radial gradient can be an ellipse (default value) or circle. To make it a circle, you need to specify it before gradient colors.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
display: flex
}
div {
margin: 10px;
height: 75px;
width: 200px;
}
.ellipse {
/* ellipse is a default value */
background: radial-gradient(yellow, purple, red);
}
.circle {
background: radial-gradient(circle, yellow, purple, red);
}
</style>
</head>
<body>
<div class="ellipse"></div>
<div class="circle"></div>
</body>
</html>
4. Custom radial gradients
In this section, we create some custom radial gradients for round div elements to achieve ball effect.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
display: flex;
}
div {
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 50%;
margin: 10px;
box-shadow: 10px 5px 5px #BEBEBE;
}
.ball-1 {
background: radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac);
}
.ball-2 {
background: radial-gradient(circle at top, yellow, transparent),
radial-gradient(ellipse at bottom, red, transparent);
}
.ball-3 {
background: radial-gradient(ellipse at top, lightblue, transparent),
radial-gradient(circle at bottom, black 50%, transparent);
}
</style>
</head>
<body>
<div class="ball-1"></div>
<div class="ball-2"></div>
<div class="ball-3"></div>
</body>
</html>