グラデーションアニメのCSSを作成できるWebサービス 『CSS Gradient Animator』

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

目次

リンク先

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

使い方

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

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

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

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

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

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

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

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

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次