title: How to make an html block cast shadow on only one side and/or follow non squared shapes
body: <p>I've been playing around with the <code>box-shadow</code> style in css using the syntax</p>
  
  <pre><code>box-shadow : offset-x | offset-y | blur-radius | spread-radius | color
  </code></pre>
  
  <p>particularly with <code>offset-x=offset-y=0</code>. When doing this, I get a shadow on all 4 sides. I don't want that.</p>
  
  <p>I want to make it cast shadow on only one or two sides of the box, is that possible?</p>
  
  <p>Say that the box surrounds a non squared shape, the box has a transparent background with a <code>png</code> or <code>svg</code> inside that illustrates a non-rectangular shape. This box is overlayed onto a web-page. Is it possible to make the <code>box-shadow</code> instead follow the contour of the contents inside that div-block instead of the transparent div-block itself?</p>
  
  <p>I mean, this just looks plain stupid:</p>
  
  <p><a href="https://i.stack.imgur.com/k8LbK.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>Edit: Some example code as requested:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  
  #example1 {
      background-color: transparent;
      padding: 10px;
      box-shadow: 6px 6px 21px -21px #CCC;
  }
  #example2 {
      background-color: transparent;
      padding: 10px;
      box-shadow: 0px 0px 21px #CCC;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;box-shadow: 6px 6px 21px blur radius light-gray on lower right side:&lt;/h2&gt;
  &lt;div id="example1"&gt;
  &lt;p&gt;A light shadow on only two sides.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;box-shadow: 0px 0px 21px blur radius light-gray centered:&lt;/h2&gt;
  &lt;div id="example2"&gt;
  &lt;p&gt;This is what I want it to look like; a &lt;u&gt;centered&lt;/u&gt; shadow but only cast on the right and the bottom, not on all four sides of the div block which has a &lt;u&gt;transparent&lt;/u&gt; background.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>