パーツ番号 07-10-01 ・ CSSのみ

ゆらぐグラデーション背景ヒーロー

ゆっくり波打つグラデーションを背景にしたヒーロー演出。WordPressのトップページのメインビジュアルにリッチな動きの印象を与えられる。

autocss

プレビュー

ソースコード

HTML

<div class="d07-10-01-bg"></div>
        <div class="d07-10-01-content">
          <span class="d07-10-01-eyebrow">NEW COLLECTION</span>
          <h4 class="d07-10-01-title">Feel the Motion</h4>
          <p class="d07-10-01-sub">動く背景で世界観を伝えるヒーローセクション</p>
        </div>

CSS

.d07-10-01{background:#0f172a}
        .d07-10-01-bg{position:absolute;inset:0;background:linear-gradient(120deg,#312e81,#6366f1,#0ea5e9,#312e81);background-size:300% 300%;animation:d1331move 14s ease-in-out infinite}
        .d07-10-01-content{position:relative;z-index:1;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 12px}
        .d07-10-01-eyebrow{font-size:10px;letter-spacing:.2em;opacity:.75}
        .d07-10-01-title{margin:0;font-size:26px;font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.35)}
        .d07-10-01-sub{margin:0;font-size:12px;opacity:.85;max-width:220px}
        @keyframes d1331move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-01-bg{animation:none;background-position:50% 50%}
        }

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