How to rotate a gradient rather than the whole div?

I have this gradient on element, and am trying to rotate only the gradient, but when I try to rotate it, as you see in the snippet, the whole element is rotating.

Any ideas?

#test {
  transform: rotate(180deg);
  color: #d3d3d3;
  background-color: #003366;
  background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  I'm gonna be some buttons and stuff
</div>

Solution

You can simply use degree with linear-gradient to rotate it. In this case you have to use 0deg (or to top) because the default value of linear-gradient is to bottom which is 180deg

#test {
  color: #d3d3d3;
  background-color: #003366;
  background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<div id="test">
  I'm gonna be some buttons and stuff
</div>

As you can see in the documentation the syntax is:

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

Where

<angle>

The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.