[CSS] 自動で色が変わるグラデーションのCSSコードを生成するジェネレーター

CSS Gradient Animator

CSS Gradient Animator」は、CSS3のanimationプロパティとliner-gradientプロパティを使用して、色が変化していくグラデーションカラーを再現するCSSコードを生成できるジェネレーター。

Add colorからカラーを追加して、グラデーションやスクロールするアングル、カラーを変化させるスピードを指定してコード生成。カラーは複数追加可能となっています。

「あれ、何となく色が変化している?」というぐらいのスピードに設定すると、お上品で良い感じ。

Source: CSS Gradient Animator

CSS3のグラデーション生成ツール

css3gradientgenerator.png

CSS3で可能になったグラデーション。
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。

グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。-webkit-gradient-moz-linear-gradient のどちらにも対応しています。

適応する際は、background: -moz-linear-gradient (); background: -webkit-gradient (); とします。

[ CSS3 Gradient Generator ]