流れるグラデーション背景をCSSで実現できるWebサービス 『CSS Gradient Animator』

流れるグラデーション背景をCSSで

実現できるWeb「CSS Gradient Animator」

好きな色を選択したらコピペで簡単に

美しく流れる背景を作成できます。

CSS Gradient Animator リンク先はこちらから

シンプルな画面が表示されています。

画面右側のプレビューには静止画では

分かりませんが、グラデーションが流れる感じで

色が変わっていきます。

この色を変更するには左側から色を追加していきます。

自分で作るにはClear Allを押して色を自分で追加して

いきます。

VIEW CODEを押すとCSSコードが表示されます。

背景要素、ここではBodyに対して

Background:linear-gradientと

animationプロパティで10秒のアニメーションを適用

＠keyframesでアニメーションさせています。

シックなダークテーマなグラデーションも作ってみました。

カラフルなイメージが強いグラデーションですが、

こんなダークテーマでもイイ感じでアニメーションします。

CSSだけで実装できる動く背景、

ちょっと使ってみては如何でしょうか。