背景画像や背景色に透過していくグラデーションタイトル

グラデション部分を背景と溶け込ませたい時の、覚書です。

背景が白色の場合のグラデーションの付けた方を説明しているサイトはありましたが、背景が画像の場合はどうすれば良いのでしょうか？

背景が白色の場合のグラデーション

グラデーションの終わりを白色にしています。
背景に色がついていたり背景が画像の場合は溶け込みませんので、用途が限られてしまいそうです。

See the Pen Untitled by p-plusピープラス (@p-plus) on CodePen.

背景画像や背景色に透過していくグラデーション

背景が画像や色がある場合で、帯が背景に透過していくグラデーションです。

片側のみグラデーション透過と両端がグラデーション透過の場合です。

See the Pen Untitled by p-plusピープラス (@p-plus) on CodePen.

※背景の画像は、ダミー画像として使える「ロレム・ピクサム」さんから使用させていただきました。

台形の反対図のグラデーションタイトル

<div class="g-title"><span>キャッチコピー</span></div>

.g-title {
	display: inline-block;
	font-size: 16px;
	padding: .8em 1.6em .4em;
	position: relative;
	color: #fff;
	font-weight: bold;
	text-align: center;
	z-index: 1;
	width: 200px;
	height: 40px;
}
.g-title::before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(90deg, red 0%, #182F60 50%, #00479D 100%);
	transform: scaleY(-1.3) perspective(2em) rotateX(10deg);
	transform-origin: bottom;
}

.g-title span{
	position: absolute;
	top:50px;
	left: 30px;
}

まとめ

難しいcssではありませんが、グラデーションを使ったデザインをすることが私はあまりないので、いざグラデーションをcssで書くときに忘れてしまいます。

どちらかというと、文字にグラデーションを入れる方が使うかもしれませんね。