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

オーロラ(Aurora)グラデーション背景

複数の帯状グラデーションが緩やかに回転しながら発光するオーロラ風背景です。WordPressの先進的なプロダクトサイトやヒーロー背景に映えます。

css3d

プレビュー

ソースコード

HTML

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

CSS

.d07-02-11{padding:0;background:#050814;overflow:hidden}
        .d07-02-11-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,.5)}
        .d07-02-11::before{content:"";position:absolute;inset:-30%;
          background:conic-gradient(from 0deg at 50% 50%,#22d3ee,#7c3aed,#22c55e,#f472b6,#22d3ee);
          filter:blur(40px) saturate(1.4);opacity:.55;animation:d1533spin 16s linear infinite}
        @keyframes d1533spin{to{transform:rotate(360deg)}}

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