Add Shadow Effect for Blog Images

Lately I was working around with multiple CSS codes on W3Schools website, and wanted to apply Shadow Effects to Blog Images. Although this is completely the web designer's choice, but a little bit of designing gives viewers a great experience. So we'll hop in to find out how we can do so?


Add Beautiful CSS Shadow Effect for Blog Images

How to Add Beautiful CSS Shadow Effect for Blog Images?

There are several methods to add a CSS Shadow Effect to Blog Images. I'll show you two ways to:

Method I: Adding CSS for Image Border

This CSS code will add a subtle border around your photos and images using drop shadows very similar to Pinterest pins.

Step 1. To add this, head over to Blogger Dashboard. Now click on Theme Menu.
Step 2. Click on Edit HTML.
Step 3. Paste this code above </head>
Step 4. Save theme.

.imgBorder {
  padding: 15px 15px 0;
  background-color: white;
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
  -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

To apply the CSS class to any image, use the following HTML code:

<img src="img.jpg" class="imgBorder" width="200" height="200" alt="My Image" />

Edit the marked codes as per your needs.



Method II: Editing Default Post Body Image from Blogger Template

This will add shadow effect to every single images uploaded in any article of the blog by default. This method doesn't require you to mention any class for every single photos that you upload.

Follow the steps carefully:

Step 1. Go to Blogger Dashboard. Tap Theme. Click on Edit HTML.
Step 2. Press Control+F inside the coded box.
Step 3. In search field type post-body img
Step 4. Select that code and replace it with:

.post-body img{max-width:95%;height:auto;display: block;margin-left: auto;margin-right: auto;box-shadow: 0px 8px 5px -5px rgba(34, 2, 0, 0.8);}

Here you can edit the marked codes as per your need.
Step 5. Save theme. You're done.

I hope both of these methods worked for your blog. If you've liked this, don't forget to share it with one's who need this. Also let know your feedback in comments below. I'll be back to you guys with another interesting post.