How to Create a Drop Shadow for PNG Images

Shadows always give an image a fresh look and make it eye-catching.

The CSS box-shadow property allows adding shadows on images, but we cannot use it with png images as the effect will always put a square image shadow.

So, if you want to create a drop shadow for the png image, the best choice is the filter property, which has many values that can help you to solve a lot of styling problems.

How to Apply a Drop Shadow to PNG Image.

Put the image source in the <body> section.
Give the width of the image in the <style> section.
Set the filter property to the "drop-shadow" value.

There are four values: "offset-x" specifies the horizontal distance. "offset-y" specifies the vertical distance. We set the "offset-x" and "offset-y" to "5px". The next is "blur-radius", which applies more blur on the image. We set it to "5px". The fourth value is the color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. You can pick colors from our Color Picker tool.

The filter property is used with the -webkit- extension.

Example of creating a drop shadow for a PNG image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 250px;
        -webkit-filter: drop-shadow(5px 5px 5px #666666);
        filter: drop-shadow(5px 5px 5px #666666);
      }
    </style>
  </head>
  <body>
    <h2>Drop Shadow on PNG image</h2>
    <img src="/build/images/w3docs-logo-black.png" alt="w3docs logo">
  </body>
</html>

Try it Yourself »

Result

Drop Shadow on PNG image

Earlier we told about the difference between the box-shadow property and drop-shadow() CSS function, now let’s make it more evident in the following example.

Example of creating a drop-shadow and box-shadow for a PNG image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 200px;
      }
      .box-shadow {
        float: left;
        box-shadow: 7px 7px 7px #666666;
      }
      .drop-shadow {
        float: right;
      }
      .drop-shadow img {
        filter: drop-shadow(7px 7px 7px #666666);
        -webkit-filter: drop-shadow(7px 7px 7px #666666);
      }
    </style>
  </head>
  <body>
    <h2>Difference between box-shadow and drop-shadow</h2>
    <div class="images">
      <div class="box-shadow">
        <p>Box-shadow
          <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
        </p>
      </div>
      <div class="drop-shadow">
        <p>Drop-shadow
          <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
        </p>
      </div>
    </div>
  </body>
</html>