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

このエントリーをはてなブックマークに追加

グラデーション(linear-gradient)生成ツール

▼生成したグラデーション

あいうえお

生成したソースを表示 生成結果のURL

CSSコード

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

HTMLコード

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

▼以下を設定して下さい。

サンプル   サンプル   サンプル   サンプル   サンプル   サンプル   サンプル   サンプル  

グラデーション

ボックス関係