How to create an image Shadow in CSS tutorial

Recently I needed a shadow around the image of my portfolio. So I asked around about how to set a shadow in CSS. I have also tried on Google and I found two options that I see fit for every need. One is on Canva and the other one is in native CSS. As Niall suggests. I chose the CSS option and I want to quickly go with you on how to do it if you are a newbie like me. Here we go:

Shadow in CSS
Shadow in CSS

Create a transparent background.

If you like to have the shadow around the image, not on the box you should create a background to that image so that it’ll be ..well, nicer. You can do that by using the Remove BG website which it’s free for a certain quality, you can access the website and upload your photo here

Before we begin I want to tell you that I also created a video tutorial that is under 2 minutes and it explains the below steps accordingly., and I also added the code source on codepen here.

how to add shadow to an image using CSS

Breaking points:

As usual, I will break the process into points so that it will be easier to follow.

  1. create a folder on your desktop, (or whatever place you see convenient) to stock your project
  2. open your IDE (I am using VS Code)
  3. open “new file”
  4. choose the folder you created (the one in the desktop from number 1 in this list) and open it
  5. create a new file ended in .(as of dot) html
  6. write this code inside of the .html file<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><link rel=”stylesheet” href=”styles.css”><title>shadow in css</title></head><body><img class=”drop-shadow” src=”YOUR PHOTO NAME” alt=”your photo name “></body></html>
  7. Create a file ending in.(as of dot) CSS, in the code above-titled styles.css
  8. Back to our .html file make sure you hooked up the stylesheet from the css file
  9. link the photo you want in the HTML file, I am referring to this line in our .html file:  <img class=”drop-shadow” src=”YOUR PHOTO NAME” alt=”your photo name “>
  10. At this point, we should check the project in our local host by opening the “live Preview option” on our IDE. If you haven’t already downloaded the extension you should, the complete documentation on the extension for VS Code can find it here.
  11. inside our .css file write the following code:.drop-shadow {filter: drop-shadow(2px 4px 10px #222);}Of course you can play with pixels so that you have your desired shadow.
  12. At this point, after you saved all the projects in your IDE, you could see the final image having a shadow around it.


Having this in our hand we can use it for our project(s) and we also learned how to add a shadow in CSS. I hope this short tutorial will help you in your future projects.

Check also how to add an embed project on Notion here.