Gradient with using CSS only:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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> |
HTML:
1 | <div class="gradientBoxesWithOuterShadows">Vipul Rai</div> |