Geeks With Blogs

Anirudha gupta

In this post I will show you how to create a box and wrapper for page that have shadow effect using css3.

For make this effect we use box-shadow 


<div class="container">

<div class="container-hold pull-left">

<div class="container-hold-top pull-left">





Here is the css

.container {

box-shadow: 10px 10px 5px #888;


.container .container-hold {

box-shadow: -8px 10px 5px #888;

width: 100%;

height: 100%;


.container .container-hold .container-hold-top {

box-shadow: 10px -10px 8px #888;

height: 100%;

width: 100%;



This code make shadow on left ,right and top side of wrapper.

This is the syntax for box-shadow

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

Check my code that I not use spread for box-shadow. You can try it to make spread your box-shadow more.


Here is some link to great post


If you miss something in my post Please comment me so I can improve it.

Posted on Tuesday, June 4, 2013 10:38 AM | Back to top

Comments on this post: How to design shadow based box in Css 3 .

# tom brady youth jersey
Requesting Gravatar...
thanks for share!
Left by ZWFN on Sep 09, 2013 7:10 AM

Your comment:
 (will show your gravatar)

Copyright © Anirudha | Powered by: