less than 1 minute read

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

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? && [ ? ? ? ] ]#</font></p>

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.