<div class="square"></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="drop-shadow">
      <!-- Get the element's graphic,  throught the SourceGraphic keyword in the 'in' attribute, apply a blur filter, and name the output through the 'result' attr -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="shadow" />
      
      <!-- Get the previous output, shift its position, and output with the same name -->
      <feOffset in="shadow" dx="3" dy="4" result="shadow" />
      
      <!-- Darken the result of the previous filters -->
      <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0" result="shadow" />
      
      <!-- Put the original graphics atop the shadow we made -->
      <feBlend in="SourceGraphic" in2="shadow" />
    </filter>
  </defs>
</svg>
@import "compass/css3";

body{
  background:white;
}
.square{
  position:absolute;
  background:#5677fc;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  margin-top:-50px;
  margin-left:-50px;
  filter:url('#drop-shadow');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js