How to remove Blogger Picture/Image Shadow and Border

how to remove shadows and borders from your blog that are found on some of blogger’s templates. The shadow effect can be great when used sparely, but on blogger templates it can seem a little overdone. This post will show you how to remove the shadow from your blog posts, images and headers. Hope you find it useful.

Remove shadow from blog post/content

You need to firstly access your code so go to Design > Template > Edit HTML and Search (CTRL F/CMD F) for .content-outer. You should see the something similar to the following code, it may look a little different depending on what template you are using. You’ll want to carefully remove the code within the brackets to remove the shadow effect.

.content-outer{
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
 }

Alternatively, you can go to Design > Template > Customize > Advanced > Add Css & add the code below to the box to over-ride your css. This will add it above ]]></b:skin> in your HTML code.

.content-outer, .main-inner .widget, .date-outer {
/* remove borders by xomisse */
-moz-box-shadow: none !important;
-goog-ms-box-shadow: none !important;
-webkit-box-shadow:none !important;
box-shadow:none !important;
}

Remove Shadow from Text Header on Blogger

Design > Template > Customize > Advanced > Add Css & add the following code;

.Header h1 {
/* remove borders by xomisse */
text-shadow:none;
}

Remove shadows from images – post, sidebar, profile

Design > Template > Customize > Advanced > Add Css & add the following code;

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove borders by xomisse */
-moz-box-shadow: none !important;
-goog-ms-box-shadow: none !important;
-webkit-box-shadow:none !important;
box-shadow:none;
}

Remove shadows and borders from images

Design > Template > Customize > Advanced > Add Css & add the following code;

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove borders by xomisse */
padding: none !important;
border: none !important;
background: none !important;
-goog-ms-box-shadow: 0px 0px 0px transparent !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

If there is something with a shadow on your blog that you wish to get rid of and I didn’t mention it above, simply look for the element in your code, find box-shadow and change it to 0px , that should solve the problem. If not, leave me a comment and I’ll help you in whatever way I can.