Remove shadows and borders on Blogger

A quick tutorial on how to remove the shadows and borders that are found on some of the templates by Blogger. I am not a huge fan of shadows, I much prefer flat design that is becoming popular.

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 box shadows and borders from Blogger elements

The code for shadows is in your CSS Secton. To access that go to Template > Edit HTML. This shows your template code. The CSS is in between <b:skin> and ]]><b:skin>. Not sure how to find that? Check out this post for help.

If there is something with a shadow or border on your blog that you wish to get rid of, look for the element in the CSS section of your template. Find box-shadow or border property and change it the value to 0 or none.

writing css - selector, property and value

Remove box shadows from Blogger

Find all the elements on your blog that have a box-shadow. It may look something like the following

selector {
  -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);
}

The values may look different if your blog template uses the Template Designer Variables, if so it will look something like this

selector {
  -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
}

You’ll want to carefully edit the values in both instances to remove the shadow by replacing the declarions within the brackets with the following


/* remove shadows by xomisse */
-moz-box-shadow: none;
-goog-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;

or remove the declarations altogether which is usually a better choice.

Remove text shadows on Blogger

Again go to Template > Edit HTML and find your CSS section. Look for text-shadow and remove the declaration or change the value to nill.

For example to remove the text shadow from your blog title in the header, find .Header h1 and change it to the following

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

Remove shadows from blog images

In Template > Edit HTML, find the following

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img

and change the values so it looks like

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

Remove borders from blog images

The very same as shown above, change the value to none or remove the declarations.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove borders by xomisse */
border: 0px;
}

Post last updated:

87 responses to “Remove shadows and borders on Blogger”

  1. Hi, I tried everything you posted and none seem to work. Can you please help me out. My test blog is http://ruetest.blogspot.ca/ . Maybe there is something I’m not doing correctly.

    1. Hello. The only thing I can see a shadow on is the photo, correct? If that’s it, then you need to find the following code in your HTML. From what I can see, it is what still has a box-shadow.

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img

      and remove the box-shadow code between the curly brackets, changing the padding to 0px might also help. This will remove the shadow. Let me know how you get on.

  2. Uuugh! Still not working. for some reason the finder can’t find the code you asked me to look for. Basically telling that the code I am looking doesn’t exist.

    1. It should be between b:skin and /b:skin, possibly under the widget heading depending on your template. If you click into the HTML box and then click CTRL & F or CMD & F, a different search box will appear. If you still can’t find it, try searching for just .post-body img. Let me know 🙂

    1. No problem 🙂 x

  3. thank you thank you thank you! i’ve been wanting to get the awful border shadow off forever and now i finally could! you’re the best!

    1. Awh 🙂 glad I could help! Fab blog, your outfits are amazing. Following 🙂

  4. Thank you soooo much! This was extremely helpful :3
    (computer hug)

    xx

    1. Awh 🙂 thanks! x

  5. Hi Ellie,

    How do I get rid of the shadows and borders on the pager and footer , right at the bottom of the page.

    Thanks,
    Gerson

    1. Hello! Same steps as above but find #blog-pager and .footer-fauxborder-left

      1. Can you give me the css code to add I dont seem to find the #blog-pager or thr .footer on the html code, I used your css code successfully to remove shadow from the posts.

        Thanks!

        1. Exact same CSS as above so it’s #blog-pager { -moz-box-shadow: none !important; -goog-ms-box-shadow: none !important; -webkit-box-shadow:none !important; box-shadow:none !important; border: 0px !important;} and .footer-fauxborder-left { -moz-box-shadow: none !important; -goog-ms-box-shadow: none !important; -webkit-box-shadow:none !important; box-shadow:none !important; border: 0px !important;}

          1. Thanks,

            Can I put you on my blog for the month of nov or dec as Miss 5Talents, I try to promote women and finance.

            Gerson

          2. Yeah sure, thank you 🙂

  6. Whatever I do I am unable to remove the shadow 🙁

    My trial blog is :
    http://trailblog4me.blogspot.in/

    1. Hello, there is no shadow on your blog. Do you mean the transparent background?

  7. Thanks, I applied this to my site http://mypinkhealth.blogspot.in/ and it worked

  8. Ian

    I am looking for a way to remove the border only from selected images in a post. Can this be done?

    1. When composing a post, click Edit HTML tab. Find your selected image and add the above rules/values to it like so

      <img src="IMAGE URL" style="border: none; padding: none; box-shadow: none;">

  9. Ellyphant

    I don’t know if you can help or not, but on my blogger I seem to have these red lines around my blog posts and I can’t figure out how to get rid of them or at the very least change the colour. They really clash with the colour scheme on my page 🙁

    Not sure if I can post a print screen so I’ve got the link to my page/site so you can see. Thanks in advance if you see this 🙂

    http://ellyphantinsight.blogspot.co.uk/

    1. Hello, are you seeing it on your main blog page? As red line appears while in Blogger Template Designer (Template > Customise > Advanced). Could you email me with a print screen as I can’t see the lines from here. Will try help you figure out what causing it.

  10. please how do I remove the black long border bellow my blog description

    1. Hello. The reason it’s styled that way is because its your tabs section for navigation menus, page menus, etc. Instead of removing it, I’d recommend moving the gadget down one level, this won’t change the position visually but it will disconnect it from the tabs styling. Check out the end of this post to see how to move it down a level in Layout – http://xomisse.com/blog/unlock-and-remove-header-gadget/

  11. There is long black borderline below my blog description, how do I remove it http://www.enyinnayaemma.blogspot.com

  12. thank you this post was so helpful! no way could i have done it by myself 😛
    http://www.cailinchic.blogspot.ie/

    1. Glad to help 🙂

  13. Please how do i center the banner below my blog description???
    please i want the banner to be in center.

    Thanks…
    Comr. Emma

    1. Hello. Go to Layout and click edit on the gadget containing the code for the banner. Before the code add <div id="bannerad">, at the end of the code add </div>. Then go to Template > Edit CSS and find ]]> </b:skin>, add #bannerad {text-align: center;} above it and save.

      1. Please on the go to Template > Edit CSS Do you mean Temple > Edit HTML and find ]]> </b:skin> , add #bannerad {text-align: center;} above it and save. THANKS

        1. Hello, yes sorry – go to Layout and click edit on the gadget containing the code for the banner. Before the code add <div id="bannerad">, at the end of the code add </div>. Then go to Template > Edit HTML and find ]]> </b:skin>, add #bannerad {text-align: center;} above it and save.

          1. I applied the above code but it fail to work, it keep displaying the code at the top of my blog

            Thanks…
            Comr. Emma

          2. That means it’s in the wrong place, make sure it’s above </b:skin>. You currently have it under your blog title in the HTML, needs to be within <b:skin> and </b:skin>

  14. thanks great stuff! used the tips in my blog and it worked! 🙂

  15. Big Thanks…
    You are blessed and special to our generation, you are special and you will live long for many who will need your help… God bless you.
    All this is to thank you for helping me to center my blog below description banner which is centered now through your help, once again Big Thanks and God bless…
    Comr. Emma

  16. Thank you so much for this! Your blog is great and so useful! 🙂

    Thanks to you I can clean up my blog so much and make it looked so much more personal and professional!

    xx

    1. Awh thank you, I’m happy to help 🙂

  17. hey, I’ve tried both the CSS and edited HTML code to remove a shadow around my blog posts but neither are working, I can’t find .content-outer in the HTML at all. I need to get rid of these orange lines, I’ve been trying for a week!

    Thanks

    1. The orange border is around your posts not the outer content, find .post-outer and you can remove it there.

  18. Hi! I love your blog, it has been such a big help to me in getting my new blog set up and laid out how I want it. It really is a labor of love.

    I’m trying to insert images on my sidebar as headings for things like ‘Connect’, ‘Archive’, ‘Search’, ect. When I design those headers in a photo editor and then insert them as an image widget on the sidebar the shadow appears around them. Which I don’t want. However, I like the shadow on my post images.

    Is there any way to remove the shadow just from the images that I put in my sidebar?

    Thanks!!

    1. Hello, I don’t think there is actually. Let me look into it!

  19. Thank you!! I finally make it ok!! Thanks to you!! 🙂

  20. Hi!
    Please, I need a help.. I’ve been trying to remove this annoying border around my blog posts and just can’t succeed..I’ve been trying and trying, but nothing seems to be a good solution..

    Thanx
    Anja

    1. Hello, remove the border and box-shadow values under .main-outer in Template > Edit HTML 🙂

  21. Thank you so much for all you amazing and simple posts!! So much better, simple, and trust-able than any others I’ve found out there! Quick question? I ‘m so grateful for this post I’ve been wanting to take away the box around my photos, and used the “Remove shadows and borders from images” but is there any way to leave a small drop shadow? Thank you again!!

    1. Awh thank you! Yes you can just reduce the values between the brackets.

  22. Barb

    THank you! Blogger just changed something up with the sidebar image shadows …. this worked perfectly:)

  23. I tried this on my blog signature in wordpress and it worked!!1 Whoooo Hoo!! :-)Thank you so much I truly appreciate you posting this tutorial, as I have spent hours looking for a tutorial that shows how to remove a box-shadow from wordpress images and since there wasn’t anything out there for wordpress I decided to try your tutorial for blogger and am THRILLED that I did!!! Thanks again 🙂

  24. Hello, there! I came upon your blog by searching for a way to do a drop down navigation bar and loved your tutorial so much that I’ve decided to go through them all and I’ve now collected enough tutorials to go build my own blog! Thanks for your blog, it’s helped a lot. Wish me luck!

    1. Thank you very much Rebecca, really glad you’ve found my blog helpful. I tried to visit yours but it says it’s no longer found, have you moved it elsewhere?

  25. that was really helpful! thank you <3

  26. This worked like a charm! Thanks SO much!

  27. Thank you, Ellie, the CSS override worked like a charm in removing the shadows. The first code varies; it depends on your template.

    Unsolicited advice for some of you here who, I believe, are confusing the contrast offered by the SITE / BLOG’s background, for shadows after editing the HTML or adding CSS:

    Once you have overridden / edited the HTML, those of you using a darker background would still see an outline or a ‘shadow’. Don’t worry, that’s the area where the real shadow was, originally. It is removed (if you have edited the HTML or added CSS code). You see the outline / shadow because your background was darker or lighter (compared to the color you use for either your post or PAGE’s background. You can correct it by going to Customize –> Advanced —> Page and adjust the colors to blend according to your liking.

  28. I’m so pleased you’re still getting comments on this post (and you’re responding ;)) I’ve entered the code for html and css and it didn’t work. This code is to remove the shadow behind the posts and sidebar correct? Do you mind helping me troubleshoot? Thank you! Christina

    1. Hello Christina, you don’t seem to have shadows on your posts or sidebar. There is a border around them, to remove this find .main-inner .widget, .date-outer and .main-inner .widget h2 + div, .footer-inner .widget h2 + div and change border: 1px solid #eeeeee;; to border: 0px solid #eeeeee;;

  29. kay

    Hi, this worked perfectly on my main page but hasn’t done the same for all my other pages. For example, if you click on the ’email me’ bird it takes you to a contact page and the borders are still there!

    1. I don’t see any borders on your contact “blog-page.html” page apart from those on the contact form?

  30. Thank you so much for writing this post.It worked perfectly,now I’m truly happy with how I edited my blog <3

  31. HI, I tried the code but nothing works. Even tried the suggestion your made in comments to other readers, but still the shadow won’t go 🙁

    1. Hello, what shadow are you referring too? I can’t see any shadow on your blog

  32. Dwipa

    Thanks

  33. You rock Elaine! Thank you so much for that tutorial, it’s really easy and I’m so happy with the new look of my blog!

  34. Hi I’m trying to remove the gray borders around images on my company’s blog. I’ve tried everything you suggested multiple times, including your responses to other posters, but nothing is working. There’s the main image and the button in the sidebar. I’d really appreciate any help!! Thanks. Ellie.

    1. Hello Ellie, you’re missing a closing bracket before .post-body img, .post-body .tr-caption-container

      1. Hmm… It still didn’t change anything. I tried a left bracket, right bracket, straight, curly, and angled – no change.

        1. You currently have a [ there, it should be } to close off the previous code.

      2. It’s still not working. Don’t know what I’m doing wrong. I tried a right bracket, left bracket, curly brackets, nothing made any difference.

        1. Hi Ellie, you have an extra character before .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img and are missing a closing bracket before .post-body img, .post-body .tr-caption-container which is blocking other CSS. You also have border and padding values set for that, as well as background values which is causing that border.

          1. YES! I removed the border and background values and it totally worked. I’m so happy. Thank you so much for your help. Now I’ll know what to do for any future images too. Thanks again.

          2. No problem, that should work for them all now so you won’t have to worry about it 🙂

  35. Hello. I would love to get rid of the borders , but I want to keep the image description. I’ve been looking for days how to remove borders but not the text and I don’t find it nowhere. Can you please help me here? Thanks

    1. Remove the background, border and box-shadow values from .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img. That will leave you with just the caption 🙂

      1. It still doesn’t work. Is there any code for changing color of text? So that the borders would gone and text would be white?

        1. To change the caption colour find .post-body .tr-caption-container and alter the colour value. The caption and borders are separate so removing the borders and background won’t affect the caption.

          1. Thank you very much.. It works now:)

  36. Thank you so much, this code works wonderfully!

  37. Hi!

    I’m trying to remove the border & shadow around the images in mobile view and I’m not sure what changes to make? I really want to make the shadow go away because it shows around the signature image.

    What to do?

    Thanks for all your help!

    1. Hello, you need to remove the box shadow and border for .mobile .post-body img, that will remove from mobile view. There’s also a couple of errors in your CSS, you have HTML present which shouldn’t be in the CSS section and could be causing issues with your CSS being read.

  38. Thank you so much! Such a life saver 🙂 xxx

  39. Shadow free! I love you!

  40. I’m trying out Emporio, so I’d love some tutorials for how to customize that theme.
    Thanks, your tutorials are honestly the best out there for Blogger!

  41. hallo i cant remove sidebar shadow from my blogger. i didd it with body posts from another site but not sidebars. can u help? thnx

  42. Thank you for you tutorial. I want to include images in my posts and have tried to follow your instructions but mine seems different. Could you please have a look and advise. This is all so alien to me. Thank you

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.