パーツ番号 02-10-12 ・ CSSのみ

キッカー付きグラデーション見出し

小さな英字キッカーの下に、紫から緑へのグラデーションで塗りつぶした大きな見出しを配置するスタイル。WordPressのLPやサービス紹介ページのヒーローセクション見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="eyebrow">DESIGN STUDIO</span>
          <h4 class="ttl">発想を、かたちに。</h4>
        </div>

CSS

.d02-10-12 .wrap{ text-align:center; }
        .d02-10-12 .eyebrow{ display:block; font-size:12px; font-weight:800; letter-spacing:.18em; color:#6a5cff; margin-bottom:10px; }
        .d02-10-12 .ttl{ all:unset; display:block; font-size:26px; font-weight:800; line-height:1.5; background:linear-gradient(90deg,#6a5cff,#22c55e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

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