Noise Gradient

色を混ぜ、テクスチャを加え、書き出し

スペース シャッフル · Ctrl+Z 元に戻す

CSS

/* 生成中… */
パレット
プリセット
グラデーションタイプ
有機
粒スタイル
ブレンドモード
書き出しサイズ
Favorites

1000×563px で書き出し

無料グラデーション・ノイズテクスチャジェネレーター

有機・線形・放射・円錐のグラデーション背景を作成。粒状感やテクスチャを追加し、パレットを選んでPNGまたはSVGで書き出し。アカウント不要、ブラウザで使って数秒でダウンロード。

使い道

Web・アプリ

ヒーロー、ランディング、スプラッシュ。2000pxでRetina対応書き出し。

SNS・シェア

投稿やシェア用画像。1:1や16:9でプロジェクトにドロップ。

プレゼン・印刷

スライド、ポスター。SVGはくっきり、PNGはどこでも使えます。

使い方

グラデーションタイプ(有機・線形・放射・円錐)を選び、パレットの色を増減し、広がりとテクスチャを調整。アスペクト比と長辺サイズを設定してPNGまたはSVGで書き出し。スペースキーで新しいバリエーション。

すべての書き出しは個人・商用利用ともにロイヤリティフリーです。

できること

プリセットとお気に入り

ワンクリックでグラデーション(夕焼け、海、オーロラなど)。自分用を保存していつでも読み込み。

リンク共有・コピー

デザイン全体をエンコードしたリンクをコピー。開いた人が同じグラデーション・色・設定を見られます。

画像から色

画像をアップロードしてパレットを抽出。主な色をサンプリングしてグラデーションストップを埋めます。

元に戻す・やり直す

セッション全体の履歴。Ctrl+Z / Ctrl+Shift+Zで元に戻す・やり直してから書き出し。

CSSをコピー

ワンクリックで貼り付け用CSS:グラデーションと粒レイヤー(mix-blend-mode付き)。

粒スタイル

ノイズ(細かく)、フィルム(粒状)、スキャンラインから選択。グラデーションに異なるテクスチャを付けられます。

ブレンドモード

オーバーレイ、乗算、ソフトライトなどで粒の乗せ方を調整。

書き出しサイズ

アスペクト比(1:1、16:9、9:16、4:3、3:4)と長辺(500、1000、2000px)。PNG・SVG共通。

よくある質問

  • アカウントは必要ですか?

    いいえ。ブラウザでジェネレーターを使い、登録なしでPNGまたはSVGをダウンロードできます。

  • 書き出しは商用利用できますか?

    はい。すべての書き出しは個人・商用利用ともにロイヤリティフリーです。

  • 書き出しサイズは?

    アスペクト比:1:1、16:9、9:16、4:3、3:4。長辺:500、1000、2000px。

  • PNGとSVGの違いは?

    PNGはラスター(ピクセル)で固定サイズ向け。SVGはスケーラブル。どちらもテクスチャ付き。

4種類のグラデーション、1つのツール

有機・線形・放射・円錐をワンクリックで切り替え。テクスチャスライダーで粒を追加し、書き出しをプレビューに合わせます。

PNGまたはSVGで書き出し

高品質PNGまたはスケーラブルなSVGをダウンロード。どちらもテクスチャ付き。アスペクト比と長辺(500、1000、2000px)を選んで書き出し。透かし・登録なし。

共有と再利用

グラデーションのリンクをコピーして、誰でも同じデザインを開けます。またはCSSをコピーしてプロジェクトに貼り付け。グラデーションとテクスチャが1つのスニペットで。登録不要。