初心者でも安心!CSSグラデ-ションが簡単に作れる無料ツール

ID463アイキャッチ画像






CSSでグラデーションを作るのは大変そうだけど、実際のところどうなの?

色を変更するにも16進数がよくわからなかったり、角度や位置を変えたり、ブラウザ毎に記述を書き分ける必要があったり…と、やっぱりCSSでグラデーションを作るのは大変ですね。

実際のコードを見ると、大変さがよくわかります。

ただでさえ紙媒体デザイナー殺しのCSS。これでもかと言わんばかりの記述でヤル気が失せますが、そんな手間のかかるグラデーションが1分程度で作れてしまう便利ツールがあるんです。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

ブラウザ上のツールなので、インストールせずに使用する事ができます。

使い方はとても簡単で、画面左に表示されているグラデーションバーで、好きな位置にカーソルを動かして色を決めます。あとは画面右のテキストエリアに書き出されたCSSを、ファイルにコピペするだけです。驚くほど簡単すぎ!

驚くほど簡単!呆れるほどクール!

なんとなくPhotoshopやイラレと似ているので、よっぽど操作に迷うことは無いと思います。最初から登録されているグラデーションが結構あって、どれもキレイで使いやすそうな色なので、そこから用途に合わせてカスタマイズしてもいいかもしれません。

グラデーション色見本

さらにベンダープレフィックスが同時に掻き出されるので、ブラウザ毎の記述を気にする事なくコピペが出来ます。いやホント有り難い!

グラデーションベンタープレフィックス

まとめ

便利、便利と騒いでみましたが、正直あまりグラデを使う機会は無いんですけどね…。

でもまぁ、いざグラデ使うとなるとコードってどんなだっけ?となるので、有り難い事には変わりありません。まだ使ったことのない方は、是非使ってみてください。

初心者でも安心!CSSグラデ-ションが簡単に作れる無料ツールでした







ID463アイキャッチ画像