たまたまかもしれませんが、最近この手のツールも次々に良いものが出てくるなと感じています。つい先日も直感的なCSS3のグラデーションジェネレーター

リアルタイムに多彩なグラデーションCSSを生成できる「CSS Gradient Generator」

たまたまかもしれませんが、最近この手のツールも次々に良いものが出てくるなと感じています。つい先日も直感的なCSS3のグラデーションジェネレーター「GradPad」をご紹介させていただきましたが、今回のツールはさらに細やかなグラデーションの設定を、手軽におこなえるようになっています。

• 
• 組織のマインドマップツールをマインドマイスターにすべき理由
• 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!

多彩なグラデーションCSSを手軽に生成できる「CSS Gradient Generator」

「CSS Gradient Generator」は、わかりやすいUIで多彩なグラデーションCSSのパターンを生成できるオンラインツール。

実際にサイトで使った場合の具体的なサンプルも見ることができたり、グラデーションのサンプル集からCSSを取得できたりするのもこのツールの良いポイントです。

リアルタイムにグラデーションCSSを生成

生成したグラデーションがそのままリアルタイムにCSSへ反映される。

グラデーションを生成する画面UIがわかりやすく、少し難易度の高い設定も手軽に行えるようになっているだけでなく、生成する度にCSSが発行されるので、気に入ったものができたところですぐにCSSで残しておくこともできます。

サンプルからもグラデーションCSSを取得可能

テーマを持ったグラデーションのサンプル集。

自分で１から作るだけでなく、各々テーマに基づいたグラデーションからグラデーションCSSをワンクリックで取得することも可能です。

CSS Gradient Swatches

サイトでの使用事例も見られる

StripeやInstagramなどでグラデーションがどのように使われているかという事例を見ることができる。

人気サイトにおいてグラデーションがどのように使われているか、という事例も紹介されています。

16 Super Fire CSS Gradient Examples

デザインをする際にこういったトレンドを意識することも重要ですが、そういったことが手落ちになってしまうことも多々あるので、このように教えてくれると助かりますね。

興味があるかたはCSS Gradient Generatorへどうぞ。