Default templates of Blogger has some shadow on their image background. How remove it or change shadow color, side of the shadow, width of shadow etc.

Change shadow of images on blogger

Blogger default templates and some custom template has shadow effect on images. We can change the color, width and everything of the shadow or even we can remove it.

How to remove the shadow of the image

Default template has a shadow on images. We can remove it by doing this simple Template Edit.

  • First go to your Dashboard > Template
  • Click on Edit HTML
  • Search and find following code .post-body img
  • Find the following code just after the above code, colored code should be same. Others may be different. Delete the entire three lines
  • -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    image blogger image shadow
    Just Delete these three lines, image shadow disappears.
  • Save the template, refresh your page and check it.

How customize it and give nice effects

We can customize the shadow to give some nice effects. For example, give more shadow and give a distinct view, like below.

Change your shadow level and give nice effects

How to do it

  • Take the Edit HTML from Template.
  • Find .post-body img
  • Find the code these red colored three lines just after it, the same three lines given in the removal of shadow.
  • -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

    Change colors and concentration

    • Change rgba(0,0,0,.1) to rgba(255,255,255,.1)) to change black shadow to white(good for dark themes). Increase the 0.1 to give more concentration. 1 is the maximum.
    • Change rgba(0,0,0,.1) to rgba(0,0,255,.1) to give blue shadow.
    • Change rgba(0,0,0,.1) to rgba(0,255,0,.1) to give green shadow.
    • Change rgba(0,0,0,.1) to rgba(255,0,0,.1) to give red shadow.
    • You can mix these to create more colors..

    Change the side of the shadow and spreading

    Note the code line, -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1).

    • Red colored 1px indicates the right side shadow, blue colored 1px indicates bottom shadow and green colored 5px gives shadow to four sides.
    • Increase these values as your wish. The more you give the image will be highlighted from the background. For example: The above picture.. That is 10px 0px 10px rgba(0,0,0,0.7). Change these values on every three lines. So your code will be like below
    • box-shadow: 10px 0px 10px rgba(0,0,0,0.7);
      -moz-box-shadow: 10px 0px 10px rgba(0,0,0,0.7);
      -webkit-box-shadow:10px 0px 10px rgba(0,0,0,0.7);

Good luck guys.. Please share your feedback..
PS: These three lines do same things basically, but are applicable to different browsers.


Share this article