CSS3 グラデーションが簡単に作れるジェネレーターまとめ

美しいグラデーションが簡単に作れちゃうジェネレーターまとめ。
グラデーションの書き方は、ブラウザによってちょい違うので覚えにくい…。

基本の書き方は以下になります。

/* Firefox */
background: -moz-linear-gradient(開始位置, 色 位置, 色 位置, ･･･);

/* Chrom と Safari */
background: -webkit-gradient(linear, 開始位置, 終了位置, from(開始位置の色), to(終了位置の色));

/* 共通 */
background: linear-gradient(開始位置, 色 位置, 色　位置, ･･･);

上記を参考に実際に位置指定やカラーコードを当てはめて記述するとこうなります。

/* Firefox */
background: -moz-linear-gradient(top center, #fff 0%, #999 100%);

/* Chrom と Safari */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#999));

/* 共通 */
background: linear-gradient(top center, #fff 0%, #999 100%);

上記のようにグラデーションを指定する場合は、記述が長くて色々面倒なので、Web上で確認しながら簡単にグラデーションが作れるジェネレーターをまとめてみました。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

www.colorzilla.com

CSS3 GENERATOR

CSS3 Generator | Teknologi Terbaru

www.css3.me

CSS3 Gradient Generator

http://gradients.glrzad.com/

gradients.glrzad.com

CSS 3.0 MAKER

Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.

Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your proj...

www.toptal.com

※webkit系のコードのみ生成できます。

Color reminder

真っ白な歯で笑顔に自信

coloreminder.com

※自分でグラデーションを作る際に近似色のカラーコードを調べることが出来るツール