概要 メッシュグラデーション
放射状グラデーションを重ねて CSS / SVG 出力
使い方
滑らかな多点メッシュグラデーションを作り、インターフェース向けに CSS や SVG として書き出せます。
メッシュグラデーション
ベース色に 4 層の放射状グラデーションを重ねます。プレビューと CSS は同時に更新されます。
メッシュグラデーションとは
複数の放射状グラデーションをベース色に重ね、各色が自分の位置で透明にフェードします。単一の方向を持たない、柔らかな混色になります。
層は独立しているため、1 つの中心を動かしても構図全体は変わりません。
CSS と SVG の出力
CSS 版は background-image に 4 層の radial-gradient を重ね、現代のブラウザで動作します。SVG 版は持ち運びやすい 1 ファイルで、デザインツールや印刷に適します。
よくある質問
なぜ 4 色ですか？
4 つの中心でヒーローやカードに十分な奥行きが出て、濁りません。増やしたい場合は書き出したコードを編集してください。
文字の可読性はどう保ちますか？
落ち着いた領域に文字を置き、半透明のパネルを足し、WCAG ツールでコントラストを確認します。
対応環境は？
CSS の層状放射状グラデーションは広く対応しています。非常に古いブラウザではベース色のみ表示される場合があります。