CSSでグラデーション作成:簡単快適ジェネレーター「Blend」

CSSでグラデーション作成:簡単快適ジェネレーター「Blend」

WEBサイトにグラデーションを表示する場合、ほんの数年前まではIllustratorやPhotoshopで画像に書き出して、それを貼り付けるのが普通でした。

ところが最近はCSSのコードで記述するのが主流になってきて、Illustratorにもコードを書き出す機能が実装されました。

しかし、わざわざIllustratorを使わずとも、単純なグラデーションならブラウザ上のジェネレーターで手軽にサクサクッと書き出すことが出来ます。

今回は、簡単に使えるジェネレーター「Blend」のご紹介。

Blend Create and customize beautiful CSS3 gradients.

作成できるグラデーションは、一方の色から一方の色へと変化していく単純なパターンのみです。
複雑に変化するパターンには対応していません。

Blendの使用方法

まず、Blendのサイトを開きます。

中央の「Let’s Blend!」をクリックします。

左下と右下の調整パネルで2つの色を決めます。
また、色番号を直接打ち込むこともできます。

変化する色を見ながら直感的に操作できるので、この手のジェネレーターとしては驚くほど使いやすいです。

右上のパネルでは、「線形」と「円形」の2パターンを切り替えられます。
さらに「線形」のグラデーションでは、角度を調整することも出来ます。

気に入ったパターンが出来たら、右上の「</>」をクリックします。

すると、CSSのコードが表示されるので、

これをコピーして使ってください。

実際に作ってみました

実際に3パターンほど作ってみました。

 

 

 

 

これ、画像じゃありません。
CSSで書き出してます。
コードはHTMLタグにstyle属性で直接指定しています。

作成に要した時間はほんの数分。

いやあ、便利なものですね^^