title: How can I make a fancy drop shadow?
body: <p>I have an "article" tag and I want to make it have a fancy drop shadow with lifted corners. I want to avoid using images and make it purely with CSS if possible at all.</p>
  
  <p>This is an example of something that looks like what I want to achieve:
  <img src="https://i.stack.imgur.com/6osXy.png">
  </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="mainContent"&gt;
      &lt;div class="contentWrapper"&gt;
          &lt;article class="content"&gt;
  
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>And the CSS I have so far:</p>
  
  <pre><code>.mainContent{
  background: #F8F8F8;
  width: 100%;
  position: absolute;
  margin-top:500px;}
  
  .contentWrapper {
  margin: auto;
  width: 1000px;
  padding-top: 50px;}
  
  .content {
  margin-bottom: 50px;
  padding: 40px;
  border: #999 1px solid;
  line-height: 25px;
  color: #4D4D4D;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;}
  </code></pre>