If you like the way images look raised off the page a little with a box shadow, read on and you’ll learn how easy is it to add this effect to your website images.
Tools you’ll need:
- Online CSS generator
- Firebug Addon for Firefox browser or Lite version for Chrome.
Important Note: XHTML & HTML Selector Classes
Find Image Class
The first step is to find the class for the image or images you want to add a box shadow effect to.
That’s where the Firefox extension comes on very handy.
Create CSS Code
The easiest way to create CSS code for your box shadow effect is to use an online generator.
Add Box Shadow CSS To Image Class
The next step is to add the CSS code for your box shadow to the image class you want to style.
Once you’ve done that, you can paste the CSS code at the end of your child themes style.css file.
Here’s some examples:
All Images
This code will add the effect to all your images.
Specific Image
This code will add the effect to one image using the image i.d which you can grab from the source code on that page or using Firebug.
Single Posts
This code adds a box shadow to all images in the content area of all single posts.
Single Pages
This code adds a box shadow to all images in the content area of all single pages.
Archive Images
This code will add a box shadow to all featured images on all archive pages on your website.
Specific Category Archive Page
You can easily change this code if you want to add the box shadow to featured images in a specific category archive page by adding the category i.d to the CSS rule.
All Sidebar Images
This code will add the effect to all images in all sidebars on your site.
All Images In A Specific Gallery
Change the gallery i.d in the code to add a shadow box effect to all images in a gallery.
Shadow Box With Content Boxes
You can also add a shadow box effect to content boxes which have been generated using CSS rather than images.
Using Box Shadow On Background Images
You can also add the code above to any class in your style sheet and produce the box shadow effect anywhere in your theme.
Example:
Another option is to add this code to an existing CSS declaration and adjust the value of 20px to a smaller number.
box-shadow: 0 0 20px #111;
Adding Box Shadow To Image Without Using CSS Code
You can always cheat and use a web tool like Snagit which offers a range of different effects including box shadow.
5 replies on “How To Add A Box Shadow Effect To Images”
Hi Brad. I just tried adding this but no luck. I first tried the .post-image code, then I just added the box-shadow line to the existing .post-image section under the 4px padding line. No change after clearing the browser cache and W3TC cache.
I’m using Genesis 2, AgentPress 2.
Hi Michael
All the CSS and PHP code on this site is tested so i know it works.
Sometimes when you apply it to other selector classes, it may need tweaking as it written for a specific purpose.
Hi Brad. I’m sure it works, but for some reason it just doesn’t on my site. Genesis 2/AgentPress 2. All I did was add the following to the bottom of my style.css and flushed my caches – no change.
.post-image {
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
}
Thanks for the great post, the info was really helpful. I am new to all this css stuff and got all the images on my web page to have a shadow. The problem is that I don’t want all the images to have a shadow ( I want to exclude some of them). Is there a code to exclude certain images? I did try the specific image code and could not get it to work… I tried this and nothing…
.wp-image-6862 {
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 50);
}
Is there any other code I can try to target certain images? I’m using the Avada theme in WP (if that matters). Any help would be greatly appreciated. Thanks
Don’t Avada provide support?