javascript - Reverse linear gradient with css Property - Stack Overflow

admin管理员组

文章数量:1334424

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

Share Improve this question Follow asked Mar 9, 2017 at 7:06 Santhosh KumarSanthosh Kumar 1,73222 gold badges1717 silver badges2828 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

本文标签： javascriptReverse linear gradient with css PropertyStack Overflow