直接の回答
メッシュグラデーション（Mesh Gradient）は、二次元平面上に複数の放射状カラーポイントを配置し、境界線のない有機的で滑らかな色彩の移ろいを表現する現代的なデザイン手法です。
このツールの使い方
カラー制御点とプリセットの配置
キャンバス上で4〜6個の制御点を自由にドラッグするか、厳選されたプリセットから配色を選択します。
ぼかし度と乱数シードの調整
ぼかしスライダーで色境の滑らかさを調整し、固有の乱数シードを入力して同一構図を確実に復元します。
CSSコードのコピーまたは壁紙の保存
軽量な背景宣言や独立した完全なCSSルールをワンクリックでコピーし、最大4Kの高解像度PNG画像を書き出せます。
CSSメッシュグラデーションの実装仕様：背景のみと完全なCSSの比較
ブラウザネイティブのメッシュグラデーションは、単色背景の上に複数の radial-gradient() レイヤーを重ねることで描画されます。「背景のみ」モードは要素にぼかしフィルターを適用しない標準的な背景宣言を出力し、あらゆる親要素で安全に使用できます。「完全なCSS」モードは独立した ::before 疑似要素にぼかしフィルターを適用し、子要素のテキストやリンク、ボタンを鮮明かつクリック可能な状態に保ちます。
- 背景のみ：フィルターぼかしを含まない軽量な多層放射グラデーション。あらゆる構造の要素に安全です。
- 完全なCSS：分離された ::before 疑似要素にぼかしを適用。子要素のシャープさとクリック操作性を損ないません。
- 決定論的シード：32ビット Mulberry32 PRNG アルゴリズムにより、同一シードから完全に同一の色彩配置を再現します。
よくある質問
画像ファイルを使わずに純粋なCSSだけでどのように流体グラデーションを表現していますか？
複数の透明ストップを持つ CSS radial-gradient() 宣言を単色のベース背景の上に重ね合わせています。ブラウザの描画エンジンが重なり合う透明境界を滑らかに補間することで、液体のような自然な混色効果を生み出します。
「背景のみ」と「完全なCSS」の出力モードにはどのような違いや制限がありますか？
「背景のみ」は標準的な背景プロパティを出力するため安全性が高く、汎用的なコンテナに適しています。「完全なCSS」は独立した疑似要素にフィルターぼかしを適用することで、より深みのある滑らかな拡散効果を得つつ、内部のテキストがぼやけるのを防ぎます。
スマートフォンのブラウザにおけるパフォーマンスや制限事項はありますか？
広範囲のぼかしフィルターを含む多層グラデーションは、GPU性能の限られたモバイル端末で高速スクロール時に再描画負荷を高める可能性があります。また、4K PNG壁紙の出力は端末側のCanvasで直接ラスタライズするため、旧世代の端末では数秒の処理時間を要することがあります。
作成したグラデーション設定や壁紙画像が外部サーバーに送信されることはありますか？
いいえ、一切ありません。シード計算、カラーパレット処理、CSSコード生成、Canvasでの画像ラスタライズはすべてユーザーのブラウザ内（クライアントサイド）で完結します。
信頼できる参考文献・標準規格
- W3C CSS Images Module Level 3: Radial Gradients ↗ — CSS放射状グラデーション構文およびカラーストップ補間のW3C公式標準仕様。
- MDN Web Docs: radial-gradient() ↗ — CSS radial-gradient() 関数の構文、位置指定、ブラウザ互換性に関する公式技術リファレンス。