WEBの便利ツール CSS グラデーション ジェネレーター

CSSコード

.gra  {
/*グラデーションの設定*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
}
.box{
/*ボックスの設定*/
width:300px;
height:50px;
padding:5px;
text-align:center;
border: 1px solid #dddddd ;
border-radius: 5px ;
box-shadow:1px 1px 2px 0px  #101011 ;
}

HTMLコード

<div class="box gra">あいうえお</div>