CSS3 Experiments #1: 3D Gradient Box

Discover how to make your own 3D box using gradients and shadows with the power of CSS.

Posted on March 6, 2011 10 comments

First Things First

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.

The Code

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.

There are 10 awesome comments...

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!

THE DIGITAL BLOG