<p class="thumb"><img src="http://web-marketing.zako.org/images/2018/02/gradpad.jpg" alt="" width="620" height="320" class="alignnone size-full wp-image-31385" /></p>
<p>CSS3のグラデーションを生成してくれるジェネレーターは多く存在しますが、これまでのジェネレーターはそこまで直感的に設定できるとは言い難いものが多かったと思います。
今回ご紹介するのは、そのCSS3のグラデーションを直感的な操作で生成できるようにしているツールです。</p>
<!--more-->

<h3 id="css3gradpad">直感的にCSS3のグラデーションを生成するジェネレータ「GradPad」</h3>

<p>「<a target="_blank" href="http://ourownthing.co.uk/gradpad.html#">GradPad</a>」は、画面上でレバーの位置を操作することによって、あらゆる角度のグラデーションを直感的に生成できるようにしてくれるグラデーションジェネレータ。</p>

<h4 id="">クリックとドラッグだけでグラデーションを指定</h4>
[caption id="attachment_31384" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/gradpad-colorcode.jpg" alt="" width="620" height="305" class="size-full wp-image-31384" /> 直感的な操作でグラデーションを設定。[/caption]
<p>画面上にあるレバーとスライダを調整し、カラーパレットで色を指定することでグラデーションを直感的な操作で作成することが出来ます。</p>

[caption id="attachment_31383" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/gradpad-slider.jpg" alt="" width="620" height="391" class="size-full wp-image-31383" /> スライダ上に複数のポイントを設定できる。[/caption]
<p>スライダ上に複数のポイントを設けて、色の切り替わりのポイントを変更したり、透過度を指定したりすることも可能。</p>

<h4 id="css">ワンクリックでCSSを生成</h4>
[caption id="attachment_31382" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/gradpad-css3.jpg" alt="" width="620" height="504" class="size-full wp-image-31382" /> ワンクリックでCSSグラデーションを生成。[/caption]
<p>グラデーションを作成したら、画面上部の「Get CSS for this Gradient」をクリックすればCSSが生成されます。これをコピーすればOKです。</p>

<h4 class='tips'>グラデーションサンプル</h4>
<style>
.gradient{
background:linear-gradient(90deg, rgba(29, 121, 242,1) 19.989185717281877%,rgba(29, 121, 241,1) 19.989185717281877%,rgba(56, 194, 166,1) 79.99075870385906%);
width:100%;
height: 150px;
}
</style>
<div class="gradient">
	
</div>
<p>取得したCSSグラデーションをブロック要素の背景に設定したものです。設定したときのグラデーションがそのまま反映されていることがお分かりいただけると思います。</p>
<p>ちなみに以下は取得したCSSグラデーションを反映する際に設定した例です。</p>
<pre><code class="line-numbers language-css" data-language="CSS">// div.gradient <br>
.gradient{ <br>
background:linear-gradient(90deg, rgba(29, 121, 242,1) 19.989185717281877%,rgba(29, 121, 241,1) 19.989185717281877%,rgba(56, 194, 166,1) 79.99075870385906%); <br>
}
</code></pre>

<p>興味があるかたは<a target="_blank" href="http://ourownthing.co.uk/gradpad.html#">GradPad</a>へどうぞ。</p>