CSS Drop Shadows

Adding drop shadows to elements with CSS is fairly easy:

.shadow {
         -moz-box-shadow: 3px 3px 4px #000;
         -webkit-box-shadow: 3px 3px 4px #000;
         box-shadow: 3px 3px 4px #000;

Theoretically, you just need the bottom declaration (box-shadow), but older browsers that don\'t fully support it utilize the other declarations.

The format for all of these is the same:

box-shadow:   x-offset   y-offset    shadow blur radius    color  ;

Drop Shadow Transparency


-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);

Related Posts

Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post