Posted on March 6, 2011
Learn how to setup a live development environment using CodeKit & LESS.
Discover how to add a Media Queries toggle button to your site using jQuery.
Having Magento problems? This solution may help get you up and running again!
Learn how to make Polaroid-style images complete with 3D shadows using only CSS.
Discover how to make your own 3D box using gradients and shadows with the power of CSS.
One such effect is a box, with an applied gradient to it, and an elliptical shadow. These combined effects give the impression that the box is lifting in the middle, giving a shadow beneath.
Here's how I did it in CSS.
We're using CSS3 here so you'll need to view the demo in a browser that supports the effects (namely gradients and box-shadow). I recommend the latest versions of Firefox, Safari or Chrome – I'm afraid I've not tested beyond these browsers, but as long as yours supports the properties above then there should be no problem.
Of course, there's nothing to stop you using this effect on projects now, just remember that older browsers won't be able to see the goodies.
Here's the HTML we'll need for our page:
<title>CSS 3D Box Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
...some content can go here...
And the CSS:
margin:100px auto 0 auto;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
margin:400px 0 0 -290px;
border-radius:290px / 8px;
-moz-border-radius:290px / 8px;
-webkit-border-radius:290px / 8px;
box-shadow:0 10px 20px #000;
-moz-box-shadow:0 10px 20px #000;
-webkit-box-shadow:0 10px 20px #000;
Don't forget to check out the live demo to see if working for real in your browser, and examine the source code to see how it all fits together. You can also generate more exaggerated shading effects by altering the gradient values and vertical positioning of the shadow DIV.
Please do share your experiments in the comments, I'd love to see more examples of how CSS can be used to enhance a site's design without the need for images.
Great div gradient! I want to add something like that to my website soon.
hi thanks, this works fine for firefox 8 that I use. but this does not work on IE8. how to make this work properly in IE8 ??
IE8 is never likely to natively support the CSS3 rules need to make this work.
I would suggest trying CSS3 PIE (http://css3pie.com/) which may help get part of the way there…otherwise you would need to implement the same effect using images.
Of course, the graceful degradation of CSS3 means that these “non critical” effects won’t really impact on the user’s experience on non-supporting browsers, the effects (in most cases) are not really important. Using something like Modernizr (http://www.modernizr.com/) you can always add in your own style definitions to effects that are not supported on particular browsers.
This is great!! I wanted to create something like this and my book couldn’t help me. Thank to Google and Toolboxdigital.
[…] http://toolboxdigital.com/2011/03/css3-3d-gradient-box/ […]
I was looking for perfect box. Tnx…
This is awesome! Thanks 🙂
its very good, thanks a lot!
Thanks a lot!
Mail (will not be published) *
Your comment *
I consent to Toolbox Digital collecting and storing my data from this form, as detailed in the Privacy Notice.
Previous: CSS3 Experiments #2: Polaroids
Next up: Are Template Clubs Losing The Plot?
.htaccess Made Easy
by JEFF STARR
Buy Now »
Hardboiled Web Design
by ANDY CLARKE