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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </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('#blur');
}

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