グラデーション自動作成
WEBやホームページ、壁紙の背景などで使うグラデーションの素材を自動で作成できます。
色やサイズ、方向などを設定し、変化する色相、彩度、明度などを変更すれば簡単にグラデーション素材が作成できます。
すべてブラウザ上で作成でき、JPGやPNGでダウンロードすることが出来ます。
作成したグラデーションは、無料でご自由にお使い頂いて結構です。
グラデーション作成画面
左のカラーピッカーで色で色を選びます。この色を元に、色相、彩度、明度、向きなどを変えればグラデーションが作成されます。
「JPG作成」か「PNG作成」をクリックすれば、下にJPG画像やPNG画像が生成されるのでそちらを保存してご利用下さい。
作成される画像のサイズは、設定した横幅、縦幅ですが、「作成画像サイズ」の画像横幅、画像縦幅を変更することでサイズを変えて作成も出来ます。
設定
作成画像サイズ
PNG作成
JPG作成
| 横幅: | px |
| 縦幅: | px |
| 色相: | ° |
| 彩度: | % |
| 明度: | % |
| 向き: | 度 |
| 変化後HSV: |
H 113.1°
S 77.8%
V 52.9%
|
| 画像横幅: | px |
| 画像縦幅: | px |
グラデーション画像ファイル
グラデーション自動作成の使い方
色選択
左のカラーピッカーからグラデーションに使う元の色を選びます。 パレットをクリックして色を選択する以外にも、RGBのカラーコードを直接入力したり、HSVを値を入力することでも指定することができます。 この色と、設定で色相、彩度、明度などを変更した色の2色でグラデーションが作成されます。
グラデーション設定
グラデーションの元の色からの色相、彩度、明度の変化量とサイズ、方向を変更できます。 数値の入力はレンジ入力でバーを動かすことでも変更できます。
| グラデーション横幅 | 10px～400pxの間で、グラデーションの横幅を指定することが出来ます。 |
|---|---|
| グラデーション縦幅 | 10px～300pxの間で、グラデーションの縦幅を指定することが出来ます。 |
| 色相 | -180°～+180°の間で元の色相からの変化量を指定することができます。 |
| 彩度 | -100%～+100%の間で元の彩度からの変化量を指定することができます。 0以下になる場合は0、100以上になる場合は100になります。 |
| 明度 | -100%～+100%の間で元の明度からの変化量を指定することができます。 0以下になる場合は0、100以上になる場合は100になります。 |
| 向き | グラデーションの向きを指定します。 元の色から変化した色に向かって右向きを0度として、角度分だけ反時計回りに回転します。 |
| 変化後HSV | 変化した色のHSVを確認することができます。 |
作成画像サイズ
グラデーションの画像を作成する場合の、画像のサイズを変更することができます。
作成した画像が大きすぎて入らない場合は、画面に合わせて小さく表示されますが、保存すれば大きい画像で保存されます。
| 画像横幅 | 10px～3000pxの間で、作成するグラデーションの画像の横幅を指定することが出来ます。 |
|---|---|
| 画像縦幅 | 10px～3000pxの間で、作成するグラデーションの画像の縦幅を指定することが出来ます。 |
画像に変換
「JPG作成」または「PNG作成」をクリックするとそれぞれJPG画像、PNG画像が下に作成されるので、右クリックで保存などしてグラデーションをご利用ください。
