<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/02/webgradients.jpg" alt="" width="592" height="401" class="alignnone size-full wp-image-30807" /></p>
<p>CSS グラデーションは、配色さえうまく組み合わせることができれば美しい背景色を実現できるものですよね。</p>
<p>しかしながら、その配色が難しいことこの上ないわけです。</p>
<p>そこで今回は、180種類ものCSSグラデーションのパターンを配布しているサイトをご紹介します。</p>
<!--more-->


<h3 class="header-label">180種類のCSSグラデーションを配布している「Fresh Background Gradients」</h3>
<p>「<a target="_blank" href="https://webgradients.com/">Fresh Background Gradients </a>」は、<strong>約180種類のCSS グラデーションのパターンを配布しているサイト。</strong></p>
<p>気に入った配色をクリックするだけで、背景グラデーションのCSSをコピーすることができるようになっています。</p>

<h4 class="tips">グラデーションをプレビュー</h4>
<p><img src="http://web-marketing.zako.org/images/2017/02/Gradients-preview.gif" alt="" width="1920" height="990" class="alignnone size-full wp-image-30806" /><br />気に入った配色をクリックすると、その場で拡大表示して背景色に使ったときのイメージをプレビューすることができます。</p>

<h4 class="tips">背景用のPNG画像を取得できる</h4>
[caption id="attachment_30810" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/02/webgradients-png.jpg" alt="" width="592" height="413" class="size-full wp-image-30810" /> 配色の右上にある矢印ボタンを押すとPNG形式の画像をダウンロード。[/caption]
<p>気に入った配色があったら、それをPNG形式でダウンロードすることができます。</p>
[caption id="attachment_30809" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/02/webgradients-download.jpg" alt="" width="592" height="254" class="size-full wp-image-30809" /> ダウンロードしたPNG画像（都合上リサイズした上に半分に分割しています。）[/caption]
<p>ダウンロードできるPNG画像は2400×2000pxのサイズです。</p>

<h4 class="tips">背景用のCSSを取得できる</h4>
[caption id="attachment_30808" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/02/webgradients-css.jpg" alt="" width="592" height="394" class="size-full wp-image-30808" /> Get CSSを押すとCSSをコピーします。[/caption]
<p>CSS グラデーションとして気に入った配色をコピーすることも可能です。</p>

<p>Get CSSを押すと、</p>
<p class="desc"><code>background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);</code></p>
<p>といったようにCSSをコピーできるようになっています。</p>

<p>興味がある方は<a target="_blank" href="https://webgradients.com/">Fresh Background Gradients </a>へどうぞ。</p>
