Does your site run on Perch CMS? Hire me to help. Perch CMS Development

CSS3 box-shadow and image hover effects

Posted on by Clive Walker in CSS CSS3

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers.

Box-shadow basics

First, a quick introduction and explanation. The box-shadow property takes several attributes/values, like any other CSS property, and these are are specified in order as follows:

  • Horizontal offset of the shadow: a positive value for shadows on the right of the box, and a negative value for a shadow on the left of the box
  • Vertical offset: similarly, a negative value means the shadow will be on top, a positive one means the shadow will be below the box
  • The blur radius: a value of 0 makes the shadow sharp, the higher the number, the more blurred.
  • Color: no need to explain this one ;-)

Just to explain, here’s a style sheet rule that will give a 1px border and a grey drop shadow of 5px to right and bottom of an element. The shadow has no blur in this instance.

.dropshadowclass {
        border: solid 1px #CCC;
    -moz-box-shadow: 5px 5px 0px #999;
    -webkit-box-shadow: 5px 5px 0px #999;
        box-shadow: 5px 5px 0px #999;

I use the -moz- and -webkit- prefixes for Firefox and Safari and the official box-shadow property for browsers that support this in future. Here’s how it looks:

This paragraph has the dropshadowclass. For browsers that support box-shadow, you should see a drop shadow around it. You will not see this if you are using Internet Explorer 8 or less, sorry guys.

Image link hover effect

An interesting way of applying the box-shadow property is to use it for image link hover/mouseover effects. That’s not the only use of course but I think it’s a good one. In this case, more advanced browsers will see the drop shadow applied but other browsers will see a slightly less decorative effect. Here’s what I mean. Using these declarations in my style sheet I can apply a drop shadow to an image link.

.imagedropshadow {
    padding: 5px;
    border: solid 1px #EFEFEF;
a:hover img.imagedropshadow {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;

Lime with green background The image is shown at right. It has some padding and a border applied but hover your mouse over the image to see the drop shadow (Firefox, Safari and Chrome users).

On mouseover/hover, the linked image shows a drop shadow with Firefox, Safari and Chrome but I have also changed the border color on hover. This is so that Internet Explorer 6/7/8 (and other browsers that do not support box-shadow) see a border color change. Thus, all browsers see a hover effect but more advanced browsers get the drop shadow. Yay!

I think this is a good use for box-shadow. I would be interested to see other uses of CSS3 box-shadow on live websites… so if you know any, let me know.

Does your site run on Perch CMS? Hire me to help. Perch CMS Development


  • 25 Jan 2010 11:57:14

    What about adding transitions to the mix?

    .imagedropshadow {-webkit-transition:all .2s ease-in;}

  • 25 Jan 2010 12:48:26

    It looks great when you combine this with a CSS transition (currently only working in Webkit based browsers). I used this on my photoblog site when browsing through the photos. Check it out here (you’ll need either Safari or Chrome to see transitions, the box shadow will work in Firefox anyway).

    Greetings, Fabian

  • 25 Jan 2010 14:00:44

    Daniel, Fabian: Yes, transitions look very nice. I have not looked into CSS transitions in depth yet but I tried out a quick example with the CSS above and it’s definitely something I want to use! Thanks for the suggestions!

  • 26 Jan 2010 09:14:25

    Every time I read about CSS3 it seems the possibilities are fantastic and can save you a huge amount of time in programming backgrounds and various other properties.

    Box shadow effects are certainly a main feature of the CSS3 property, and as shown here they can have great effects on the aesthetics of the page. The only issue of using CSS3 at present is the obvious fact that IE doesn’t support it. I wonder when Microsoft will update IE to comply to these new standards, as surely they will have to when the platform is eventually rolled out.

    I’ll be looking forward to reading more CSS3 development as they are rolled out, and further tutorials covering this next stage of the webs development. Thanks for a great article.

  • 26 Jan 2010 11:01:03

    Use box-shadow with care though—it’s been dropped from the CSS3 spec.

  • 26 Jan 2010 11:16:01

    @Harry: I read about the box-shadow spec here but I’m hoping that it will re-emerge and/or that browsers like Firefox and Safari will not drop their proprietary versions. For the moment, the method is OK with FF and Safari. Fingers crossed that it will stay that way.

  • 26 Jan 2010 18:19:32

    Gazaro makes use of the CSS3 box-shadow throughout the site (layout, drop-down navigation, product images). It’s an easy effect that can completely revamp an interface if used correctly.

  • 26 Jan 2010 18:27:44

    From the w3c site: This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.
    So, we should be safe :-)

  • 01 Mar 2010 00:05:21

    It would be nice to have some sort of alpha control over this effect as I have run into the situation where the shadow is over both light and dark colours and it looks a little shonky.

    Make it so it’s dark enough to work properly on the dark background and it’s too strong on the light one. The other way around and you get a glow on the dark background but a nice effect on the light.

    Perhaps we need a blend mode ‘multiply’?

  • 02 Mar 2010 05:06:24

    @Ian: I’m not entirely certain if it would work, but perhaps using RGBa to specify colors, and using a lower opacity might help the situation.

  • 13 Jul 2010 15:30:09

    @Ian Thomas: You can use transparency, instead of specifying a hex color, use the new RBGA colors, where you can also specify an alpha value. (ie. box-shadow:inset 0 0 5px rgba(0,0,0,.25);)

    A multiply effect would be nice as well too but that’s for HTML6 maybe? … ;)

  • 31 Aug 2010 10:54:10

    Works like an absolute dream and the fade transition is the icing on the cake. Just need that lazy IE to man-up now! Cheers :)

  • 11 Oct 2010 12:20:28

    The problem in Box Shadow is with Blur property. If I give blur pixel value more than 999px it crashed the browser. Its not helpful for giving bigger shadow on multiple objects.

  • 07 Nov 2010 17:09:58

    If you have a box that you want to use as a button how do you get the shadow/blur to occur when you hover over it? Example:

    Thank you in advance!

  • 07 Nov 2010 17:28:12

    @GFP63: Web Designer Wall has a good tutorial on CSS3 buttons with a demo here. If you look at the CSS for the demo, you’ll see that each button has a subtle shadow in the initial state. You can change this on hover to make the shadow more pronounced.

  • 07 Nov 2010 19:09:43

    Thank you. That’s great!

  • 02 Aug 2011 18:07:20

    How would I apply this to my CSS Style Sheet? #StillNewWithCSS

  • 02 Aug 2011 20:09:39

    @DreAnthony: The style sheet declarations you need are shown above. There are lots of CSS tutorials out there; have a read of those and it will become clearer.

  • 05 Oct 2011 01:36:01

    Perfect! Just implemented on our site with transitions.

  • 19 Jan 2012 16:00:53

    It would make sense to include the HTML in the tutorial…for people who aren’t experts and need to see everything thats going on.

  • 02 Mar 2012 16:45:32

    Thanks much. I threw in 10px of padding on my image, changed the color #f9f and now I have a roll over button that looks like neon with the same color drop shadow. Thanks. Kurt

  • Rex:

    18 Apr 2012 18:32:55

    This helped me and using it I made a simple snippet to show the author info using the CSS3 hover effects

  • 26 Nov 2012 20:24:38

    great tuts! very simple image effect

Comments are OFF for this post.

© 2024 Clive Walker