グラデーションアニメのCSSを作成できる
Webサービス。プレビューを見ながら
美しい流れるようなグラデーション背景を
CSSで実装できます。

リンク先

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

使い方

とてもシンプルな画面ですがCSSでグラデーションアニメーションを作成するのに便利な
機能が備わっています。
左側がメニューで配色の設定が可能です。右側は画面全体がプレビューとなっていて
実際の動作確認やCSSコードの確認が可能です。

画面左のadd paletteの下の丸いボタンを押します。

カラーパレットが表示されるので選択したい色を選んでSaveを次々にクリックしていきます。

6色ほどSaveを押して作ってみました。
画面右側では選択した色でグラデーションアニメーションが表示されます。
流れるような美しい背景を作り出す事ができます。

徐々に変わっていく色、こんなシンプルなWebページを作ってみたいものです。

VIEW CODEをクリックするとCSSコードを確認が可能です。
そのままコピペで使えるようになっています。

左側のメニューの一番下のadvanced settingsではアニメーションのスピードに変化を付ける事ができます。
早く色を変えたりゆっくりしたりと自由に設定が可能です。

背景を美しいグラデーションにしてみたい時は使ってみては如何でしょうか。