CSS3 Box Styles

boxes.css

.all_boxes {
	display:block;
	height:125px;
	margin:0 0 50px;
}

.all_boxes h3 {
	text-align:center;
	line-height:125px;
	color:#222;
	font-size: 28px; 
	font-size: 2.8rem;
	font-family: 'Copse', Helvetica, Arial, sans-serif;
}

#box_1 {
	background: #FEFEFE;
	background: -moz-linear-gradient(top, #FEFEFE 0%, #F7F8F9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(100%,#F7F8F9));
	background: -webkit-linear-gradient(top, #FEFEFE 0%,#F7F8F9 100%);
	background: -o-linear-gradient(top, #FEFEFE 0%,#F7F8F9 100%);
	background: -ms-linear-gradient(top, #FEFEFE 0%,#F7F8F9 100%);
	background: linear-gradient(top, #FEFEFE 0%,#F7F8F9 100%);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 
						inset 0 -3px 1px 0 rgba(0, 0, 0, 0.07);
	   -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 
	   					inset 0 -3px 1px 0 rgba(0, 0, 0, 0.07);
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 
						inset 0 -3px 1px 0 rgba(0, 0, 0, 0.07);
}

#box_2 {
	background: #EEEEEE;
	background: -moz-linear-gradient(top, #EEEEEE 0%, #DADEDE 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEEEEE), color-stop(100%,#DADEDE));
	background: -webkit-linear-gradient(top, #EEEEEE 0%,#DADEDE 100%);
	background: -o-linear-gradient(top, #EEEEEE 0%,#DADEDE 100%);
	background: -ms-linear-gradient(top, #EEEEEE 0%,#DADEDE 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEEEEE', endColorstr='#DADEDE',GradientType=0 );
	background: linear-gradient(top, #EEEEEE 0%,#DADEDE 100%);
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
			border-radius: 8px;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 
						inset 0 0 1px 1px rgba(255,255,255,0.75);
	   -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 
						inset 0 0 1px 1px rgba(255,255,255,0.75);
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 
						inset 0 0 1px 1px rgba(255,255,255,0.75);
	text-shadow:0 1px 0 rgba(255,255,255,0.6);
}

#box_3 {
	background:#FAFAFA;
	border:1px solid #BBB;
	border-color:#BBB #AAA #AAA #BBB;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
	-webkit-box-shadow: inset 1px 1px 0px 0 rgba(255,255,255,1), 
						inset -1px -1px 3px 0 rgba(0,0,0,0.15), 
						2px 2px 3px 0 rgba(0,0,0,0.08);
	   -moz-box-shadow: inset 1px 1px 0px 0 rgba(255,255,255,1), 
						inset -1px -1px 3px 0 rgba(0,0,0,0.15), 
						2px 2px 3px 0 rgba(0,0,0,0.08);
			box-shadow: inset 1px 1px 0px 0 rgba(255,255,255,1), 
						inset -1px -1px 3px 0 rgba(0,0,0,0.15), 
						2px 2px 3px 0 rgba(0,0,0,0.08);
}

#box_4 {
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(225,225,225,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(225,225,225,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1',GradientType=0 );
	border:1px solid #AEAEAE;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
			border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.15);
			box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.15);
}

boxes.html

<div id="box_1" class="all_boxes">
	<h3>Box Style #1</h3>
</div>

<div id="box_2" class="all_boxes">
	<h3>Box Style #2</h3>
</div>

<div id="box_3" class="all_boxes">
	<h3>Box Style #3</h3>
</div>

<div id="box_4" class="all_boxes">
	<h3>Box Style #4</h3>
</div>