グラデーション背景の見出し

<div style="background-image:linear-gradient(135deg,#0ff 10%,#f0f 50%,#ff0 90%);padding:3px;font-size:1.2em;">グラデーション背景の見出し</div>

グラデーション背景の見出し影付き

<div class="grd-haikei">グラデーション背景の見出し影付き</div>

.grd-haikei{ background-image:linear-gradient(135deg,#0ff 10%,#f0f 50%,#ff0 90%); padding:3px;/*内側余白*/ box-shadow:1px 1px 5px rgba(0,0,0,0.3);/*周囲の影*/ color:#fff;/*文字色*/ font-size:1.2em;/*文字サイズ(1.2倍)*/ }

グラデーション文字

【html】

<p class="grd-moji">グラデーション文字</p>

【css】

グラデーション文字

使用する色の数が少なければ180degもお勧めです。

<center><a href="" class="grd-botan">グラデボタン</a></center>

.grd-botan{ display:inline-block;/*a要素に幅や高さを指定する為に必要*/ width:100px; height:100px; border-radius:50%; color:#fff;/*リンク文字の色*/ font-weight:bold;/*リンク文字を太字に*/ text-decoration:none;/*リンク文字の下線を消す*/ line-height:100px;/*リンク文字を中央に(縦方向)*/ text-align:center;/*リンク文字を中央に(横方向)*/ background-image: linear-gradient(135deg,#0ff 14%,#f0f 50%,#ff0 86%); } ※領域を丸くしているので表示されるグラデーションは14%〜86%の範囲だけです。0〜100%で指定すると端が表示されません。

グラデーション枠

<div class="grd-waku">グラデーション枠</div>

.grd-waku{ border-image:linear-gradient(135deg,#0ff 10%,#f0f 50%,#ff0 90%) 1/3px; border-style:solid;/*実線の枠*/ text-align:center;/*文字を中央揃えに(横方向)*/ margin:5px;/*枠の外側余白*/ padding:3px;/*枠の内側余白*/ }

グラデーションの下線

<div class="grd-sen">グラデーションの下線</div>

.grd-sen{ border-image:linear-gradient(90deg,#0ff 10%,#f0f 50%,#ff0 90%) 1/0 0 6px 0;/*下線の太さ*/ border-style:solid;/*実線*/ }

区切り点線<hr class="grd-ten">

.grd-ten{ height:3px;/*点線の太さ*/ background-image: linear-gradient(90deg,transparent 60%,#fff 60%),/*線と間隔の割合 同じ数値にする 背景と同じ色にする*/ linear-gradient(90deg,#0ff 10%,#f0f 50%,#ff0 90%); background-size:10px 100%,100% 100%;/*点線の長さ*/ border:none; }