Posted on March 6, 2011 10 comments
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:
<!DOCTYPE html> <html> <head> <title>CSS 3D Box Test</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="box"> <div class="box-shadow"></div> <div class="box-gradient"> ...some content can go here... </div> </div> </body> </html>
And the CSS:
.box { position:relative; width:600px; height:300px; margin:100px auto 0 auto; } .box-gradient { position:absolute; width:100%; height:100%; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; 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)); } .box-shadow { position:absolute; left:50%; margin:400px 0 0 -290px; bottom:10px; width:580px; height:16px; background:#fff; 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.
Previous: CSS3 Experiments #2: Polaroids
Next up: Are Template Clubs Losing The Plot?
Ken - October 28, 2011 at 8:09 pm
Great div gradient! I want to add something like that to my website soon.
kocu - December 19, 2011 at 8:37 pm
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 ??
Dan Luton - December 21, 2011 at 11:02 am
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.
Utibe Etim - August 18, 2012 at 11:16 am
This is great!! I wanted to create something like this and my book couldn’t help me. Thank to Google and Toolboxdigital.
CSS3 Box Shadow Anlatımı - November 6, 2012 at 12:08 pm
[…] https://toolboxdigital.com/2011/03/css3-3d-gradient-box/ […]
Danilo - November 27, 2013 at 5:30 pm
I was looking for perfect box. Tnx…
Shortcodes For Marketers | WPdoWork.com - November 29, 2013 at 6:52 pm
[…] https://toolboxdigital.com/2011/03/css3-3d-gradient-box/ […]
Seo - December 23, 2014 at 1:18 am
This is awesome! Thanks 🙂
homa - December 19, 2015 at 11:02 pm
its very good, thanks a lot!
باطری - October 2, 2016 at 12:57 am
Thanks a lot!