写真からグラデーション
複数の色から柔らかなメッシュグラデーションを作るか、自分の写真からパレットを取り出しましょう。キャンバス上で色の点をドラッグし、ゆがみと粒子を加えて、画像をダウンロードするかCSSをコピーできます。
ブラウザがWebGLに対応していないため、ツールを起動できません。別のブラウザを試すか、ハードウェアアクセラレーションを有効にしてください。
キャンバスにカーソルを合わせると色の点が表示されます。ドラッグで移動、ダブルクリックで色を追加できます。写真はキャンバスにドロップするか、クリップボードから貼り付けられます。色の点を指でドラッグできます。2回タップで色を追加します。
色はリストの順に並びます。順番を逆にするには「逆順」ボタンを使います。
CSS
線形・放射・円錐は正確です。メッシュとモザイクは、ゆがみと粒子のない放射状の色斑による近い背景になります。
1分で自分だけのグラデーション
- 1色を選ぶパレットから、ランダムに、または自分の写真から
- 2点を動かすゆがみと粒子を調整
- 3ダウンロードPNG、JPG、WebP、SVG、またはCSSをコピー
このグラデーションとは
メッシュグラデーションは複数の色の点から作られます。それぞれの点が周囲を染め、点の間で色がなめらかに溶け合います。こうした背景は表紙、バナー、ストーリー、アプリ画面に使われます。「柔らかさ」で色の混ざり方の広さを決め、「モザイク」は最も近い点ごとにキャンバスを区切ります。線形・放射・円錐はCSSに正確に変換できる従来型のグラデーションです。
写真からパレット
写真をアップロードすると、ツールが最大7色の主要な色を見つけ、写真上でその色がある場所に点を置きます。こうしてグラデーションが写真の雰囲気を再現します。夕焼け、海、インテリア、商品パッケージなど。写真はブラウザ内にとどまり、どこにも送信されません。
ゆがみと粒子
ゆがみはパターンに沿って色をずらします。波、なめらかなノイズ、セル、中心を回る渦があります。「強さ」はどれだけずらすか、「パターンの大きさ」は粗さを決め、サイコロのボタンで別のランダムなパターンになります。粒子はフィルムのような軽いざらつきを加え、プラスチックっぽさや画面の縞を防ぎます。「すべての色を調整」では、パレット全体の色相、彩度、明るさをまとめて変えられます。
こちらもお試しください
こちらも無料、登録不要
よくある質問
答えが見つからない場合は、お気軽にお問い合わせください。
WとHの欄で指定したサイズで、長辺は最大4096ピクセルです (ブラウザのグラフィックカードの制限)。投稿、ストーリー、Xヘッダー、リンクプレビュー、壁紙向けのサイズが用意されています。画面には同じ比率の縮小版が表示されます。
PNGは劣化なしでデザイン向き。JPGとWebPは軽くてSNSやサイト向きです。ゆがみと粒子なしの線形・放射グラデーションのSVGはFigmaで編集できる本物のベクターファイルです。メッシュやゆがみありの場合、SVGの中には画像が入ります。こうしたグラデーションにはベクター形式がないためです。
線形・放射・円錐は一致します。メッシュグラデーションのCSSは複数の放射状の色斑から作られ、似た見た目になりますが、ゆがみと粒子はありません。ブラウザは通常のCSSでそれらを描けないためです。まったく同じ背景が必要ならPNGを使ってください。
写真を縮小し、すべてのピクセルを色の近さでグループ分けします (k-means法)。グループの中心がパレットの色になり、各色の点はその色が写真で最も多い場所に置かれます。あまりに少ない色は除外されます。
はい。色の四角をクリックしてピッカーを開くか、隣の欄にHEXコードを入力してください。色は2〜12個まで使えます。×で色を削除、＋で新しい色を追加し、キャンバスをダブルクリックするとその場所に新しい点を置けます。
「グラデーションのリンク」を押すとリンクがコピーされ、同じ色・点・設定のグラデーションが開きます。また、最後のグラデーションはブラウザに保存され、次回の訪問時に開きます。間違えたら、矢印ボタンかCtrl+Zで元に戻せます。
画面には縮小版が描かれ、ファイルは実寸で生成されるため、粒子やゆがみの細部がファイルでは小さくなります。色と点の位置は同じです。
はい、制限なく使えます。あなたの画像です。パレットの元になった写真はブラウザから出ませんし、色のパレットは著作権の対象ではありません。