パーツ番号 07-04-04 ・ CSSのみ

グラデーション見本帳

用途別に色を割り当てたグラデーションを4種並べた見本帳です。ヒーロー背景やバッジ、CTAなどWordPressサイト各所の配色選定に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-04-grid">
          <div class="d07-04-04-cell" style="background:linear-gradient(135deg,#6366f1,#a855f7)"><span>ヒーロー用</span></div>
          <div class="d07-04-04-cell" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span>バッジ用</span></div>
          <div class="d07-04-04-cell" style="background:linear-gradient(135deg,#10b981,#3b82f6)"><span>CTA用</span></div>
          <div class="d07-04-04-cell" style="background:linear-gradient(135deg,#64748b,#0f172a)"><span>フッター用</span></div>
        </div>

CSS

.d07-04-04-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:250px}
        .d07-04-04-cell{height:70px;border-radius:10px;display:flex;align-items:flex-end;padding:8px 10px}
        .d07-04-04-cell span{color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.25)}

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