アニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」

2017/07/07

こんにちは。
今回はアニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」です。

徐々に色が変化するグラデーションを実装できるジェネレーターを紹介します。

アニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」!

CSS Gradient Animator

css-gradient-animator

https://www.gradient-animator.com/

 

「CSS Gradient Animator」の使い方

css-gradient-animator

使い方は簡単で、画面右側を設定していきます。
「Gradient Angle」でグラデーションの角度を、「Scroll Angle」で位置を、「Speed」で時間を設定しますよ。
「Add colour +」で色を2色以上指定します。
最後に「Preview」をクリックすると設定が反映されますよ。
あとは画面右側のコードをコピべするだけです。

 

現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)
現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)

 

いかがでしたか。簡単できて便利ですね。
以上でアニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」でした。

Related Post

topへ戻る