EN
CSS - how to rotate gradient without rotating whole div element?
1
answers
0
points
How can I rotate a gradient to make it from left to right instead of top to bottom?
Let's say I want to change the following gradient direction to horizontal:
.gradient {
background: linear-gradient(lightcyan, lightseagreen);
}
1 answer
0
points
You can use to right / to left value as a first argument of linear-gradient():
.gradient {
background: linear-gradient(to left, lightcyan, lightseagreen);
}
or rotate a gradient by an angle:
.gradient {
background: linear-gradient(90deg, lightcyan, lightseagreen);
}
Practical examples
1. Using to right / to left value:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin: 10px;
height: 100px;
width: 100px;
}
.gradient {
background: linear-gradient(lightcyan, lightseagreen);
}
.to-right {
background: linear-gradient(to right, lightcyan, lightseagreen);
}
.to-left {
background: linear-gradient(to left, lightcyan, lightseagreen);
}
</style>
</head>
<body style="display: flex">
<div class="gradient"></div>
<div class="to-right"></div>
<div class="to-left"></div>
</body>
</html>
2. Rotate by angle
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin: 10px;
height: 100px;
width: 100px;
}
.gradient1 {
background: linear-gradient(lightcyan, lightseagreen);
}
.gradient2 {
background: linear-gradient(90deg, lightcyan, lightseagreen);
}
.gradient3 {
background: linear-gradient(270deg, lightcyan, lightseagreen);
}
</style>
</head>
<body style="display: flex">
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>
References
0 comments
Add comment