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>

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>

• javascript
• jquery
• html
• css

• JS Fiddle Hopefully, this will help you. – xaid Commented Mar 9, 2017 at 7:15

3 Answers 3

You can just toggle to right and to left in linear gradient.

JSFIDDLE

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)";
  }
}

Here is the JSFiddle demo

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>