How to Create a Drop Shadow for PNG image

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

The box-shadow CSS property allows adding shadows on images but we cannot use it with the png images because 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.

The filter property has many values that can help you to solve a lot of styling problems.

How to Apply a Drop Shadow on 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.

The next value makes the shadow expand and grow bigger. We set it 10px. The fourth value is the color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. You can pick the colors from our Color Picker tool.

Note that filter property is used with -webkit- extension.

Example

<!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="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="w3docs logo">
  </body>
  </html

It is possible to use filter either in CSS or inline:

<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="w3docs logo" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #666666);">

Earlier we told about the difference between the box-shadow property and drop-shadow keyword, now let’s make it more evident in the following example:

Example

<!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>

As you see in the example, we use the same png image, but we put box-shadow in the first case, and drop-shadow in the second case.


Do you find this helpful?

Related articles