多くのグラデーションツールはCSSのコードを渡すだけです。このツールは実際のcanvasにグラデーションを描画し、必要なピクセルサイズぴったりで完成したPNGをダウンロードできます。スマホの壁紙、1920x1080のデスクトップ背景、正方形のSNS投稿、カスタム寸法まで対応。アップロードは一切なく、画像はすべて端末上で描画・保存されるので、色やファイルは外部に送信されません。
無料グラデーション画像メーカー
すべてブラウザー内で動作します。アップロードも登録も不要です。
タイプ
画像サイズ
px
カラーストップ
実寸のPNGを保存します： 1920×1080 px
グラデーション画像メーカーとは？
グラデーション画像メーカーは、2色以上の色を滑らかにブレンドし、ダウンロードできる画像として書き出すツールです。色とストップを選び、線形または放射状を選択し、サイズを設定すれば、壁紙や背景、バナー、サムネイル用のPNGを保存できます。すべてブラウザ内で完結します。
使い方
- 1線形か放射状かを選ぶ. 線形は設定した角度に沿って一直線に色をブレンドし、放射状は中心から円状に外側へ色を広げます。
- 2色とストップを設定する. スウォッチをクリックして色を選び、スライダーをドラッグしてストップの位置を動かします。ストップは最大8個まで追加、最少2個まで削除でき、ランダム化ボタンで手早くアイデアを試せます。
- 3画像サイズを選ぶ. プリセット（デスクトップ、スマホ、正方形、SNS）をタップするか、幅と高さをピクセルで直接入力します。プレビューはリアルタイムで更新されます。
- 4PNGをダウンロードする. 「PNGをダウンロード」をクリックすると、グラデーションをフル解像度の画像として保存できます。または、CSSをコピーして同じグラデーションをコードで再利用できます。
こんな方に
- デザイナーやコンテンツ制作者が、Photoshopを開かずにスライドやサムネイル、バナー、ストーリー用のきれいなグラデーション背景画像を必要とするとき。
- スマホやデスクトップの利用者が、自分の画面の解像度ぴったりのグラデーション壁紙を作りたいとき。
- 開発者が、軽量なグラデーションPNGのプレースホルダーやヒーロー画像と、コードで再現するための対応するCSSを両方欲しいとき。
- SNS担当者が、投稿やストーリー、カバー画像用にブランドに合ったサイズのグラデーション背景を書き出すとき。
よくある質問
このグラデーション画像メーカーは無料ですか？
はい、100%無料で、登録もウォーターマークも制限もありません。好きなだけグラデーション画像を作成・ダウンロードできます。
サーバーに何かアップロードされますか？
いいえ。グラデーションはcanvasを使ってブラウザ内だけで描画・保存されます。色や画像、利用状況のデータはどこにも送信されません。
どの画像形式で書き出されますか？
PNG形式で書き出されるため、グラデーションは圧縮によるノイズがなく、完全に滑らかでロスレスな状態を保てます。ファイルは設定したピクセルサイズそのままで保存され、壁紙や背景、アップロード用としてすぐに使えます。
グラデーション壁紙はどのサイズにすればいいですか？
お使いの画面に合わせましょう。一般的な選択肢は、多くのデスクトップ向けの1920x1080、縦向きスマホ用の1080x1920、正方形のSNS投稿用の1080x1080です。幅と高さは8000ピクセルまで自由に指定することもできます。
線形グラデーションと放射状グラデーションの違いは？
線形グラデーションは選んだ角度に沿って一直線に色をブレンドするため、画像全体で色が移り変わります。放射状グラデーションは中心点から円状に外側へ広がるため、中心から端に向かって色が変化します。
画像と一緒にCSSも取得できますか？
はい。ダウンロードできるPNGに加えて、対応するbackground-imageのCSSも表示されます。それをコピーすれば、画像ファイルを使わずにWebサイトやアプリで同じグラデーションを再現できます。
カラーストップの仕組みは？
各ストップは、グラデーション上の0%から100%までの位置に色を対応させたものです。隣り合うストップの間は滑らかにブレンドされます。2つのストップを同じ位置に置くと、なめらかな変化ではなくくっきりした境界線ができ、ストライプやカラーブロック背景を作るのに便利です。