title: css div gradient shadow/border
body: <p>I am trying to achieve this:</p>
  
  <p><a href="https://www.google.com/search?q=css+gradient+border&amp;espv=2&amp;biw=1254&amp;bih=847&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ei=MvVgVfHMCMHysgGL1YCoDg&amp;ved=0CAYQ_AUoAQ#tbm=isch&amp;q=css+rainbow+shadow&amp;imgrc=BG57FGVD5aX-nM%253A%3BzS7NP_d5pCpSQM%3Bhttp%253A%252F%252Fmedia.mediatemple.netdna-cdn.com%252Fwp-content%252Fuploads%252F2010%252F01%252Fcss-097.jpg%3Bhttp%253A%252F%252Fwww.smashingmagazine.com%252F2010%252F02%252F18%252F50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects%252F%3B480%3B300" rel="nofollow noreferrer" title="Link to original image, in Google Image Search."><img src="https://i.stack.imgur.com/WvMZS.jpg" /></a></p>
  
  <p>I couldn't find anything like it, but here is my failed attempt:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#one {
    width: 200px;
    height: 100px;
    background-color: white;
    box-shadow: 0px 0px 20px #2D8DBD;
    left: 50px;
    display: inline-block;
    margin-right: -100px;
  }
  #two {
    width: 200px;
    height: 100px;
    background-color: white;
    box-shadow: 0px 0px 20px #B22D2D;
    left: -50px;
    display: inline-block;
    margin-left: -50px;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;div id="one"&gt;&lt;/div&gt;
    &lt;div id="two"&gt;&lt;/div&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/5fa820n5/" rel="nofollow noreferrer">jsFiddle demo</a>.</p>
  
  <p>I am using bootstrap, so I don't think just making another "gradient" image would be simpler.</p>
  
  <p>Also, I have tried compromising for this: <a href="http://designposts.net/fresh-free-css3-and-html5-tutorials/" rel="nofollow noreferrer">http://designposts.net/fresh-free-css3-and-html5-tutorials/</a> but my image is circled, and so it turns out as a cut square.</p>