How to make easy gradient shadow CSS DIV boxes

How to make easy gradient shadow CSS DIV boxes

Date: 06-01-2012

It's easier than you think to make fantastic looking DIV boxes using pure CSS. Forget about simple stuff like borders and rounded corners, we're gonna add inner gradients and outer shadows to really give the DIV boxes some flash.

Fast track to cool looking shadow/gradient CSS DIV box:

I want to fast track you on this.. as you know there are a lot of browser incompatibilities when it comes to rounded corners, gradients and shadows in CSS, so let's get it done!

Basically, IE is a massive failure until IE9 (sorry Bill and friends, but you deserve it). IE 8 and previous IE browsers don't support many of the cool bells and whistles that Firefox, Safari and Chrome have supported for some time. So we have to repeat the properties using the correct CSS for each major browser group.

Three major browser groups:

WEBKIT: Safari, Chrome
MOZILLA: Firefox
OTHER BROWSERS like IE and Opera

For webkit we use "-webkit" suffix CSS properties like -webkit-gradient or -webkit-box-shadow.

For mozilla we use "-moz" suffix CSS properties like -moz-gradient or -moz-box-shadow.

For other browsers, we just use CSS3 properties like linear-gradient or the IE specific filters like 'filter: progid:DXImageTransform.Microsoft.gradient'. Then we cross our fingers a lot because the non-webkit and non-mozilla browsers are often tricky and don't support everything… DOH!

Take this code and use it to put a nice gradient inside the DIV box and a nice shadow around the entire outside of the DIV box:

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px;
padding: 20px;
background-color: white;

/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}


And here's what the cool gradient DIV box looks like:

This is a pretty box!

 

That should get you up and running in a jiffy. Mess with the parameters and you'll have a great looking DIV box for any occasion.

Here are some fantastic resources for making cross-browser CSS and gradient magic:

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

http://www.colorzilla.com/gradient-editor/

loading..

Comments

TechWiz Website Designs

TechWiz Website Designs Says:
November 10th, 2011 at 06:29 pm

Thankyou so much for this. I was doing it the manual way but the Colorzilla website link is perfect for my gradients. Thanks!

CHPTim

CHPTim Says:
June 1st, 2012 at 07:43 am

Sure thing. I just noticed the the grad isn't showing on Chrome.. going to fix it now!

CHPTim

CHPTim Says:
June 1st, 2012 at 07:54 am

There we go... fixed. It's just that the colors don't show up the same way across webkit (Chrome) and mozilla (FF).

Chan Smith

Chan Smith Says:
June 13th, 2012 at 08:27 am

Awesome article, CHPTim ! Huge thanks ... although, it doesn't work under Opera (the whole box is missing in your example).

Jerald James Capao

Jerald James Capao Says:
October 29th, 2012 at 12:55 pm

I will try this. Thank you! :)

Eraclio Ramirez

Eraclio Ramirez Says:
August 15th, 2014 at 01:44 am

It's impressed everytime when I see some trick for doing something which is not intended for. For example to make 3D text, you can use text shadow CSS property. I have known about this trick here for the first time:
http://basicuse.net/articles/pl/textile/html_css/how_to_make_a_simple_gradient_using_box_shadow_css_property
Anyway, I am glad that people spread out such tricks through Internet. Thanks foryour share!

Add New Comment

userpic

Featured Web Templates For Sale

Design Blog Categories


Recent Blog Posts

Locate the designer of your dreams in our Designer Portfolio area.
Submit your website designs to our moderated Design Gallery.

Over 25,000 incredible designs to choose from, instant download.

Tons of downloadable templates, logos, and design components - free and paid.