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

アニメーショングラデーションメッシュ

複数の放射グラデーションがゆっくり移動し続ける柔らかなメッシュ背景です。WordPressのヒーローやセクション背景に敷くと動きのある印象を与えます。

css

プレビュー

ソースコード

HTML

<span class="d07-02-01-label">背景サンプル</span>

CSS

.d07-02-01{padding:0;background:#1a1030}
        .d07-02-01-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
        .d07-02-01::before{content:"";position:absolute;inset:-20%;
          background:
            radial-gradient(40% 40% at 20% 30%,#7b5cff 0%,transparent 60%),
            radial-gradient(45% 45% at 80% 20%,#ff5c9d 0%,transparent 60%),
            radial-gradient(50% 50% at 70% 80%,#3ad1ff 0%,transparent 60%),
            radial-gradient(45% 45% at 25% 85%,#ffca5c 0%,transparent 60%);
          filter:blur(8px);animation:d161move 14s ease-in-out infinite alternate}
        @keyframes d161move{
          0%{transform:translate(0,0) scale(1)}
          50%{transform:translate(6%,-4%) scale(1.15)}
          100%{transform:translate(-5%,5%) scale(1.05)}}

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