I have a div filled with linear gradient colour. On a click of button i want to reverse the linear gradient colour. I achieved it again by changing linear gradient value. Instead of changing the linear gradient value i want to know is there is any specific CSS property to reverse the linear gradient. Hope you understood my ask
var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;
function reverseColor(){
color.style.background = "linear-gradient(to right, rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}.linear{
width:200px;
height:30px;
background: linear-gradient(to right, rgb(192,81 ,77) 0% ,rgb(192,81 ,77) 20%, rgb(203,110 ,106) 20% ,rgb(203,110 ,106) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(226,167 ,165) 60% ,rgb(226,167 ,165) 80%, rgb(237,195 ,194) 80% ,rgb(237,195 ,194) 100%);
}<div id="color" class="linear">
</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>You can just toggle to right and to left in linear gradient.
Here is the code:
var color = document.getElementById('color');
var btn = document.getElementById('reverse');
myVar = "left";
function colorfn() {
color.style.background = "linear-gradient(to " + myVar + ", rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}
btn.onclick = function() {
myVar = myVar == "left" ? "right" : "left";
colorfn();
}
colorfn();.linear {
width: 200px;
height: 30px;
}<div id="color" class="linear">
</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>Well, there isn't exactly a specific CSS property to do that besides using the to right keywords as you did. But there is a hackish way to do it in case you really need to.
This is how I would do it:
var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;
var transformDeg = 0;
function reverseColor() {
if (transformDeg == 0) {
transformDeg = 180;
color.style.transform = "rotateY(" + transformDeg + "deg)";
} else {
transformDeg = 0;
color.style.transform = "rotateY(" + transformDeg + "deg)";
}
}
Also note that doing it this way will also reverse all contents. So this might be or not be appropriate depending on what you want to achieve :)
You can add a class.
var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;
function reverseColor() {
color.classList.toggle('reverse');
}.linear {
width: 200px;
height: 30px;
background: linear-gradient(to right, rgb(192, 81, 77) 0%, rgb(192, 81, 77) 20%, rgb(203, 110, 106) 20%, rgb(203, 110, 106) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(226, 167, 165) 60%, rgb(226, 167, 165) 80%, rgb(237, 195, 194) 80%, rgb(237, 195, 194) 100%);
}
.reverse {
background: linear-gradient(to right, rgb(237, 195, 194) 0%, rgb(237, 195, 194) 20%, rgb(226, 167, 165) 20%, rgb(226, 167, 165) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(203, 110, 106) 60%, rgb(203, 110, 106) 80%, rgb(192, 81, 77) 80%, rgb(192, 81, 77) 100%)
}<div id="color" class="linear">
</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>