Last Updated: September 09, 2019

CSS3 Drop Shadows for Icons

Using some CSS radial gradients its fairly easy to create a drop shadow for icons, images, etc like so.

Shadow Image

<body>
  <div>
    <a href="">
      <span class="shadow">&nbsp;</span>
      <img src="https://store.cerner.com/items/123/icon">
      <span>link text</span>
    </a>
  </div>
</body>
</html>

.shadow {
    position: absolute;
    height: 7px;
    width: 60px;
    top: 80px;
    left: 10px;
    /*box-shadow: 1px 40px 40px -15px lightgray;*/
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);
    background-image: -o-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);
    background-image: radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%)
    }

img {
  position: absolute;
  left: 10px;
  height: 60px;

}

span {
    position: absolute;
    top: 25px;
    left: 75px
}

#css

#css3

#shadows