title: How to create a vertical linear gradient for a GTK separator
body: <p>I'm using Gtk 3.10 and I am experimenting for the first time some of the CSS theming aspects of Gtk programming.</p>
  
  <p>Taking from the gtk3-demo I noted this excellent example</p>
  
  <p><img src="https://i.stack.imgur.com/YWDrT.png" alt="enter image description here"></p>
  
  <p>From the associated CSS file I can see that this "handle bar" is actually a gradient fill centered:</p>
  
  <pre><code>.pane-separator {
    background-color: alpha(white, 0.80);
    background-image: linear-gradient(transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .pane-separator:prelight {
    background-image: linear-gradient(transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
  }
  </code></pre>
  
  <p>So in my naivety I thought I would apply this to my Gtk application -  I wanted the vertical pane-separators to have this centered "handle" as well as the horizontal pane-separators</p>
  
  <p><img src="https://i.stack.imgur.com/751at.png" alt="enter image description here"> </p>
  
  <p>Well as you can see, the horizontal pane-separators worked (1) but the vertical pane-separators (2) &amp; (3) placed the "handle" at the top.</p>
  
  <p>I thought I would use the <code>transform: rotate(90deg);</code> from this <a href="https://stackoverflow.com/a/20649215/1626229">CSS example</a> but this didnt work in Gtk</p>
  
  <pre><code>gi._glib.GError: gtkthemeoverride.css:18:11'transform' is not a valid property name
  </code></pre>
  
  <p>I'm using this as my reference answer to use Python &amp; the Gtk.CssProvider() to load my equivalent of "style.css"</p>
  
  <p>How do I centre the vertical handle in Gtk - what changes to the CSS file do I need?</p>
  
  <hr>
  
  <p>I tried to use "90deg" in the CSS element - <code>background-image: linear-gradient(90deg, transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);</code></p>
  
  <p>This was the result - no handle in the vertical pane - but a 90deg rotation in the horizontal (just testing - I'll be using separate CSS elements later to differentiate between vertical and horizontal)</p>
  
  <p><img src="https://i.stack.imgur.com/ZZBrL.png" alt="enter image description here"></p>