CSS3の「linear-gradient」プロパティを使い、背景色としてグラデーションを指定できるCSSコードを簡単に生成できるジェネレーター「shade」。
上手く使えばかなり効果的ですよ。
「CSS Gradient Animator」は、CSS3のanimationプロパティとliner-gradientプロパティを使用して、色が変化していくグラデーションカラーを再現するCSSコードを生成できるジェネレーター。
Add colorからカラーを追加して、グラデーションやスクロールするアングル、カラーを変化させるスピードを指定してコード生成。カラーは複数追加可能となっています。
「あれ、何となく色が変化している?」というぐらいのスピードに設定すると、お上品で良い感じ。
Source: CSS Gradient Animator
CSS3で可能になったグラデーション。
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。
グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。-webkit-gradient と -moz-linear-gradient のどちらにも対応しています。
適応する際は、background: -moz-linear-gradient (); background: -webkit-gradient (); とします。