<div class="row center-xs">
  <div class="col col-xs-3">
    
    <h1>
      Drop shadow applied to a transparent PNG with the <pre>box-shadow</pre> property
    </h1>
    
    <img class="box-shadow"
         src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png">
    
  </div>
  <div class="col col-xs-3">
    
    <h1>
      Drop shadow applied to a transparent PNG with a CSS <pre>filter</pre>
    </h1>
    
    <img class="filter"
         src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png">
    
  </div>
</div>
img.box-shadow {
  box-shadow: 2.5px 2.5px 10px #0ebeff;
  /* Handy for boxes but doesn't work well on transparent images */
}

img.filter {
  filter: drop-shadow(2.5px 2.5px 5px #0ebeff);
  /* The best way to add a drop-shadow to a transparent image */
}




/*
 * Other styling stuff
 */

img {
  width: 40%;
  margin: 25px 50px 75px;
}

h1 {
  font-size: 1.25rem;
  line-height: 2rem;
  color: gray;
  padding: 25px 15px;
  font-weight: normal;
}
  
pre {
  background-color: gray;
  color: white;
  padding: 2.5px 7.5px;
  margin: 0 5px;
  border-radius: 5px;
  display: inline;
  font-weight: bold;
}

body {
  background:
    linear-gradient(
      rgba(255,255,255,0.75),
      rgba(255,255,255,0.75)
    ),
    linear-gradient(
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.5)
    ),
    url(https://source.unsplash.com/featured/?abstract) no-repeat center center;
    background-size: cover;
}

.col {
  margin: 50px 50px 100px;
  background-color: white;
}


// This pen was created to demonstrate the difference between a `box-shadow` and the `drop-shadow` filter when applied to a transparent png. I needed to add a drop-shadow to a logo the other day on a site I was creating and had to look up the best way to do it after seeing the undesirable results of `box-shadow`. CSS filters have pretty good browser support these days, with all but IE supporting the `drop-shadow` property.

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css

External JavaScript

This Pen doesn't use any external JavaScript resources.