パーツ番号 01-01-02 ・ CSSのみ

動くグラデーション背景ヒーロー

background-size:400%の巨大グラデーションをゆっくり移動させる背景演出。WordPressのLPやコーポレートサイトの雰囲気づくりに最適です。

css

プレビュー

ソースコード

HTML

<div class="d01-01-02-hero">
          <div class="d01-01-02-inner">
            <h1>色は、動きだす。</h1>
            <p>ゆらめくグラデーションが、ブランドの世界観を静かに語ります。</p>
          </div>
        </div>

CSS

.prev.d01-01-02{padding:0;display:block;min-height:320px}
        .d01-01-02-hero{height:320px;display:flex;align-items:center;justify-content:center;text-align:center;
          background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
          background-size:400% 400%;
          animation:d01-01-02-grad 12s ease infinite}
        @keyframes d01-01-02-grad{
          0%{background-position:0% 50%}
          50%{background-position:100% 50%}
          100%{background-position:0% 50%}
        }
        .d01-01-02-inner{padding:24px}
        .d01-01-02-hero h1{color:#fff;font-size:26px;font-weight:700;letter-spacing:.08em;margin:0 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.2)}
        .d01-01-02-hero p{color:rgba(255,255,255,.9);font-size:13px;line-height:1.9;margin:0}

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