パーツ番号 02-07-24 ・ CSSのみ

グラデーションボーダー見出し

枠線にグラデーションカラーを用い、文字色は単色に抑えた見出し。特集ページやプレミアム訴求の見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl">Premium Collection</h4>

CSS

.d02-07-24 .ttl{ all:unset; display:inline-block; padding:12px 26px; font-size:19px; font-weight:800; color:#1f2937; border:3px solid; border-image:linear-gradient(90deg,#6366f1,#ec4899,#f59e0b) 1; }

クラス名 .d02-07-24 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。