How to Add a Drop Shadow to PNG Image?

Razet · · 3744 Views

Shadows on the image always give it a new look and make it eye-catching.

The CSS box-shadow property permits adding shadows on images. However, we can't utilize it with png images as it will put a square image shadow.

If you need to make a drop shadow for the png image, the most choice decision is the filter property, that can help you with taking care of styling problems.

.drop-shadow {
  filter: drop-shadow(2px 4px 8px hsla(0deg, 0%, 0%, 0.5))
How to Add a Drop Shadow to PNG Image?


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      .box-shadow {
        box-shadow: 2px 4px 8px hsla(0deg, 0%, 0%, 0.5);

      .drop-shadow {
        filter: drop-shadow(2px 4px 8px hsla(0deg, 0%, 0%, 0.5));

      main {
        display: flex;

      img {
        width: 200px;
        margin: 100px;
        <img class="box-shadow" src="" />
        <img class="drop-shadow" src="" />

Please login or create new account to add your comment.

You may also like:

Important Questions to Ask a Mobile App Developer

If your company does not already have a mobile app, you might be missing out on a significant opportunity to make new sales. Modern consumers depend heavily on their smartphones (...)
Narola Infotech

CSS3 Cheat sheet - tags and attributes

Using CSS day-to-day? Whether you’re a super savvy web developer or just someone who wants to learn web development, this CSS cheat sheet should help you out.

20+ cool CSS Animated Buttons

1.Creative Button Animation Effects | Only Using HTML & CSS

Frontend Developer roadmap

Step by step guide to becoming a modern frontend developer