<p class="thumb"><img src="http://web-marketing.zako.org/images/2018/03/cssgradient-io.png" alt="" width="800" height="416" class="alignnone size-full wp-image-31403" /></p>
<p>たまたまかもしれませんが、最近この手のツールも次々に良いものが出てくるなと感じています。つい先日も<a target="_blank" href="http://web-marketing.zako.org/website-creation/beautiful-css-color-gradient-generator-gradpad.html">直感的なCSS3のグラデーションジェネレーター「GradPad」</a>をご紹介させていただきましたが、今回のツールはさらに細やかなグラデーションの設定を、手軽におこなえるようになっています。</p>
<!--more-->

<h3 id="csscssgradientgenerator">多彩なグラデーションCSSを手軽に生成できる「CSS Gradient Generator」</h3>

<p>「<a target="_blank" href="https://cssgradient.io/">CSS Gradient Generator</a>」は、<strong>わかりやすいUIで多彩なグラデーションCSSのパターンを生成できるオンラインツール。</strong></p>

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

<h4 id="css">リアルタイムにグラデーションCSSを生成</h4>
[caption id="attachment_31404" align="alignnone" width="1920"]<img src="http://web-marketing.zako.org/images/2018/03/cssgradient-io-anime.gif" alt="" width="1920" height="988" class="size-full wp-image-31404" /> 生成したグラデーションがそのままリアルタイムにCSSへ反映される。[/caption]
<p>グラデーションを生成する画面UIがわかりやすく、少し難易度の高い設定も手軽に行えるようになっているだけでなく、生成する度にCSSが発行されるので、気に入ったものができたところですぐにCSSで残しておくこともできます。</p>

<h4 id="css-1">サンプルからもグラデーションCSSを取得可能</h4>
[caption id="attachment_31402" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2018/03/cssgradient-io-sample.png" alt="" width="800" height="688" class="size-full wp-image-31402" /> テーマを持ったグラデーションのサンプル集。[/caption]
<p>自分で１から作るだけでなく、各々テーマに基づいたグラデーションからグラデーションCSSをワンクリックで取得することも可能です。</p>

<p><a target="_blank" href="https://cssgradient.io/swatches/">CSS Gradient Swatches</a></p>

<h4 id="">サイトでの使用事例も見られる</h4>
[caption id="attachment_31401" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2018/03/cssgradient-io-sites.png" alt="" width="800" height="581" class="size-full wp-image-31401" /> StripeやInstagramなどでグラデーションがどのように使われているかという事例を見ることができる。[/caption]
<p>人気サイトにおいてグラデーションがどのように使われているか、という事例も紹介されています。</p>

<p><a target="_blank" href="https://cssgradient.io/blog/css-gradient-examples/">16 Super Fire CSS Gradient Examples</a></p>

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

<p>興味があるかたは<a target="_blank" href="https://cssgradient.io/">CSS Gradient Generator</a>へどうぞ。</p>