How to Add a Drop Shadow to PNG Image?

Razet · · 5696 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?

Example:

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

    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <main>
        <img class="box-shadow" src="https://i.imgur.com/um3gjcm.png" />
      
        <img class="drop-shadow" src="https://i.imgur.com/um3gjcm.png" />
        <main>
  </body>
</html>
0

Please login or create new account to add your comment.

0 comments
You may also like:

The Ultimate Guide to On-Page Optimization: How to Leverage the Most Influential SEO Element

What is on-page optimization? On-page optimization is the practice of optimizing individual web pages to improve their search engine rankings and attract more organic traffic. (...)
maayodiya

Streamlining Your CSS Workflow with Stylelint in VSCode

How to streamline your CSS workflow by setting up and leveraging the power of Stylelint in the popular code editor, Visual Studio Code (VSCode).
Harish Kumar

Steps to Buy BRC20 Tokens

BRC20 tokens are the latest release in the Binance chain that is inciting interest among crypto enthusiasts, The fungible token standard opened new prospects for DeFi and other (...)
Rebba Lancaster

How To Develop a Ludo Game in IOS Platform?

1. Setting Xcode: Install it, which is the integrated development environment (IDE) for iOS app development. It includes the necessary tools and frameworks for building iOS apps. (...)
Kenny William

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