DEMO

HTML

		<div class="head04">
 <p class="hd4">タイトルが入ります</p>
</div>
		

HTML説明

文字を打ち換えてご利用ください。

CSS

		<style>
.head04{
 max-width: 580px;
 width: 100%;
 margin: 0 auto;
 background: linear-gradient(90deg, #1687ed99, #14375ae6) ,url("画像URL");
 background-position: center;
 text-align: center;
 padding: 60px 0;
}
.hd4{
 font-weight: bold;
 font-size: 30px;
 color: #FFF;
 text-align: center;
 margin: 0 ;
 text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
</style>
		

CSS説明

画像の設定方法
「画像URL（6行目）」のテキストを任意の画像URLに書き換えてください。

グラデーションの変更方法
「コード（6行目）」のテキストを任意の色コードに書き換えてください。
該当箇所→(90deg, #1687ed99, #14375ae6)
90degは角度です。0degにすると縦方向のグラデーションになります。
#1687ed99は左側の色になります。「 #1687ed(色コード)」+「99(透明度)」となります。右側も同様の構成です。