title: How can I simulate a basic drop shadow using border-image and linear-gradient?
body: <p>I'd like to simulate a drop shadow effect using border-image and linear-gradient (for scroll performance reasons, I am not using the native box-shadow effect).</p>
  
  <p>As can be seen in the example below and in the <a href="https://jsfiddle.net/tjsghk9t/" rel="nofollow">fiddle</a>, my attempted approach involves using border-image for the gradient, border-image-outset to move the shadow outside the content box, and border-width to show only the bottom edge.</p>
  
  <p>Admittedly, I don't understand border-image so well, particularly when it comes to using it with linear-gradients. Through trial and error, I achieved what seemed to be a satisfactory result. But as it turns out, when the width of the div is short enough, the "shadow" disappears entirely.</p>
  
  <p>What can I do to achieve a drop shadow like in the top box, but one that works regardless of the box size? Your help with this is really appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box
  {
    /* the "shadow" */
    border-image:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
      border-image-outset: 0px 0px 6px 0px;
      border-width: 0px 0px 6px 0px;
      border-style: solid; 
    
    /* other stuff */
    font-family: sans-serif;
    font-size: 20px;
    color: #FEFEFE;
    background: #007277;
    margin: 10px 0px;
    float: left;
    clear: left;
    padding: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  Here's longer text, where the "shadow" appears how I want it to.
  &lt;/div&gt;
  
  &lt;div class="box"&gt;
  Short
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>