背景色グラデーション

目的

• 背景色が左から右へ徐々に薄くなっていく見出しを作りたい。
• テキストは縦中央揃え。

実行結果

サンプルテキスト

解説

• インパクトがある大きな見出しが欲しい時にオススメ。
• 背景色がベタ塗りだと重い印象のため、グラデーションで柔らかくスタイリッシュな印象にしました。

HTML

<h6 class="layout_2_8"><span>サンプルテキスト</span></h6>

CSS

.layout_2_8 {
	background: linear-gradient(-135deg, #B4C7B3, #023200);
	margin-top: 0%;
	margin-right: 2%;
	margin-bottom: 0%;
	margin-left: 2%;
}

.layout_2_8 span {
	font-size: 20px;
	line-height: 1.7;
	color: #FFFFFF;
	text-indent: 40px;
	display: table-cell;
	vertical-align: middle;
	height: 140px;
}