面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder

Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。

GradienFinder

[ad#ad-2]

GradienFinderの使い方は簡単です。
まずは、Photoshopなどでグラデーションの画像を作ります。

グラデーションの画像

GradienFinderにアクセスし、画像ファイルをドロップします。
対応ブラウザはCanvasを使用しているのでIE9+とモダンブラウザです。
※Canvasサポートブラウザ

GradienFinder

ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。

CSS: 生成されたスタイルシート

background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%);
background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%);
background: -ms-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%);
background: -moz-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%);
background: linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%);

[ad#ad-2]

下記はGradienFinderを使ったサンプルで、左が画像、右がスタイルシートです。
さまざまなタイプのグラデーションで利用できるようです。

左：画像、右：スタイルシート