画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner

手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。

サイトのキャプチャ

Gradient-Scanner

[ad#ad-2]

Gradient-Scannerの使い方は簡単です。
まず、画像を「Browse」ボタンをクリックしてアップロードします。
※画像は手元の画像だけでなく、URLでも指定できます。

サンプルの写真画像

使用した画像は「Clear blue Tropical Water」です。

画像から抽出するグラデーション箇所を指定します。

サイトのキャプチャ

グラデーションを抽出したキャプチャ

抽出するバーは、縦横斜めに使用できます。

サイトのキャプチャ

グラデーションを抽出するバーのキャプチャ

グラデーションの抽出が決まったら、「Next」ボタンをクリックします。

サイトのキャプチャ

グラデーションを抽出したキャプチャ

CSS3 グラデーションのスタイルシートは、下部に生成されます。
また、抽出したグラデーションの色数が多いときは、バーをスライドすることで調整できます。

[ad#ad-2]

更に細かい調整をしたいときは、「Next」ボタンをクリックします。

サイトのキャプチャ

グラデーションの調整画面のキャプチャ

グラデーションの調整画面では、各色の変更が可能です。

サイトのキャプチャ

グラデーションの各色の調整キャプチャ

sponsors

top of page

©2018 coliss