z-index and linear gradient with alpha

Question

This code is sandboxed. It has to be made with all CSS embedded. This is also why it seems to be missing the head element. I've got divs with 10px borders that are supposed to have a translucent "shine" over the top as if the contents and border are under a clear acrylic cover. I can't get that shine to appear on top of the border/contents. I do not want to change my gradient in any way. It needs to keep its alpha values. So without changing the gradient at all, how do I get the gradient to appear as the topmost visible thing in the div?

Any help is appreciated. Code provided below.

<style TYPE="text/css">
     body {
          background-color: BLACK;
          color: #6b36ba;
     }

     #container {
          text-align:center;
     }

     #header {
     }

     #description {
     }

     #preview {
    display: inline-block !important;
     }

    #footer {
     }

     #header, #description, #footer {
           padding: 20px;
    }


    .pageshine {
    position: relative;
          margin: 15px;
          z-index: 100;
          border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
          border-width: 1px;
    border-style: solid;

          box-shadow:
               0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
               0 2px 6px rgba(0, 0, 0, 0.5),
               0 10px rgba(0, 0, 0, 0.05) inset;

          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          border-radius: 2px;

          background: linear-gradient(to bottom,rgba(96,103,104,0.3) 0%,rgba(187,187,187,0.3) 3%,rgba(187,187,187,0.3) 27%,rgba(0,0,0,0.3) 28%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0.3) 73%,rgba(75,80,81,0.3) 88%,rgba(0,0,0,0.3) 97%,rgba(0,0,0,0.3) 100%);
     }

    .border {
    position: relative;
          border: 10px solid #6b36ba;
          border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
     }
</style>

<div id="container">
     <div class="pageshine">
          <div id="header" class="border">
               <img src='' alt=''>
               [Header Image]<br><br>
               BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
          </div>
     </div>

     <div class="pageshine">
          <div id="description" class="border">
               Description of product.<br><br>
               BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
          </div>
     </div>

     <div id="preview" class="border">
          <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_53jHmHNVph2021877487.png' alt='[Product Preview Image]'>
     </div>

     <div class="pageshine">
         <div id="footer" class="border">
               <img src='' alt='[Footer Banner]'>

          </div>
     </div>
</div>