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

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

実現できるWeb「CSS Gradient Animator」

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

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

cssgradientanima34

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

cssgradientanima1

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

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

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

色が変わっていきます。

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

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

いきます。

cssgradientanima2

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

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

Background:linear-gradientと

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

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

cssgradientanima3

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

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

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

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

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

  • コメント: 0

Blobデザイン背景をCSSで作成できるWebサービス 『Gradient Blob』前のページ

読めない漢字をサクッと調べれる筆順も教えてくれるWebサービス 『手書き漢字認識』次のページ

関連記事

  1. Web制作ツール

    様々な画像をCSSで再現、表示できるWebサービス 『Img to CSS』

    画像をWeb上でCSSとして表示、再現できるWebサービス画像…

  2. Web制作ツール

    フォントを感覚で探せる広告やPOPなど制作に役立つWebサービス 『Sweetfont』

    フォントを感覚で探せる「Sweetfont」。カテゴリとは別にフレ…

  3. Web制作ツール

    レスポンシブデザインの確認に便利なWebサービス 『Responsive Checker』

    デバイス毎にサイトの表示チェックが出来るWebサービス最近はP…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP