DIV Gradient with CSS

Admin

9 years ago

Gradient with using CSS only:

<style type="text/css">
.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}
</style>

.gradientBoxesWithOuterShadows {

height: 200px;

width: 400px;

padding: 20px;

background-color: white;

/* outer shadows (note the rgba is red, green, blue, alpha) */

-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */

-webkit-border-radius: 12px;

-moz-border-radius: 7px;

border-radius: 7px;

/* gradients */

background: -webkit-gradient(linear, left top, left bottom,

color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));

background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);

}

</style>

HTML:

<div class="gradientBoxesWithOuterShadows">Vipul Rai</div>

1	<div class="gradientBoxesWithOuterShadows">Vipul Rai</div>