メッシュグラデーション
美しいマルチカラーメッシュグラデーションを作成します。 メッシュグラデーションを登録不要で無料利用。ブラウザ内で高速かつ安全に処理します。
Preview
Color points
Point 1
Point 2
Point 3
Point 4
CSS Code
background-color: #ffffff;
background-image:
radial-gradient(at 20% 20%, #667eea 0px, transparent 50%),
radial-gradient(at 80% 20%, #764ba2 0px, transparent 50%),
radial-gradient(at 50% 80%, #f093fb 0px, transparent 50%),
radial-gradient(at 20% 80%, #f5576c 0px, transparent 50%);メッシュグラデーションはブラウザ上で色を扱うためのツールです。
デザイナー、開発者、クリエイターが素早く信頼できる結果を得られるよう設計されています。
Supported formats
CSS
PNG
SVG
Tailwind
How it works
1
Step 1
メッシュグラデーションを開く
2
Step 2
色を入力またはインポートする
3
Step 3
結果をコピー、エクスポート、再利用する
避けるべき一般的なエラー
- コントラスト確認を忘れると読みやすさが低下します。
- 色を使いすぎるとパレットが扱いにくくなります。
プロのヒント
- 主要色はCSS変数として保存しましょう。
- 公開前にライトモードとダークモードで確認しましょう。
Privacy guaranteed: everything is processed locally in your browser.
可能な場合、処理はブラウザ内でローカルに行われます。アカウントは不要です。
色プロジェクトのためのメッシュグラデーション
美しいマルチカラーメッシュグラデーションを作成します。
精度を失わないメッシュグラデーション
変換と計算は正確な値（HEX、RGB、HSL、OKLCH）で行われます。視覚的な近似はなく、デザイン意図に忠実な色が得られます。
無料で使えるメッシュグラデーション
登録もソフトのダウンロードも不要。メッシュグラデーションは100%無料で、どんなブラウザでもご利用いただけます。無料プランには1日10回の利用が含まれます。
高速かつ安全なメッシュグラデーション
処理はブラウザ内で直接行われ、最大速度を実現します。データはサーバーに送信されず、色とファイルはお使いの端末に保持されます。
共有とコラボレーションのためのメッシュグラデーション
結果をHEX、RGB、HSL、CSS、JSONとしてエクスポートしたり、ワンクリックでコピーできます。チームでのカラーガイド共有やデザインシステムの文書化に最適です。
すべてのカラーツールを見る
抽出、変換、パレット、グラデーション、WCAGコントラストをわずか数クリックで。
Related tools
ガイドとチュートリアル
詳細なガイドでツールの使い方を学びましょう。
Frequently asked questions
はい、オンラインで無料で利用できます。
可能な場合、データ保護のため処理はブラウザ内で行われます。