How to add a shadow to an images using CSS

Recently I needed a shadow around the image of my portfolio. So I asked around on how to do it, of course I google it as well. I found two options that I see them fit to every needs. 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 how to do it if you are a newbie like me. Here we go:

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

add a shadow to an image using CSS

Breaking points:

As usual I will break the process in 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 ended 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 extension for VS Code you 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 desire shadow.
  12. At this point, after you saved all the project in your IDE, you could see the final image having shadow around it.

Conclusion.

Having this in our hand we can use it for our project(s) and we also learned a new thing. I hope this small tutorial will help you in your future projects.

Luc