入力
四隅の色 + 80%のぼかし
出力
やわらかいグラデーション背景とCSS
デザインツール
グラデーションメッシュ生成 - 四隅ベースのやわらかい背景
四隅の control color を重ねた radial gradient と blur で、mesh 風のやわらかい background を生成し、CSS をコピーできます。landing page、brand visual、多色実験向けです。
GradientMeshBackground
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
グラデーションメッシュ生成
左上
右上
左下
右下
80%
预览
CSS 代码
利用シーン
- landing page 用の柔らかい背景を作る
- ブランド向けの多色 wash を試す
- そのまま貼り付けられる background CSS を出力する
使い方
- 四隅の色を選ぶ
- blur を調整する
- preview して CSS をコピーする
入出力サンプル
FAQ
linear gradient と何が違いますか？
こちらは radial gradient を重ねて blur することで、design tool の mesh gradient に近いやわらかい遷移を作ります。
出力は本物の CSS mesh syntax ですか？
いいえ。互換性を優先した layered radial gradient を出力しており、実験的な mesh 専用 syntax ではありません。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS グラデーションジェネレーター
CSS グラデーションジェネレーター - Linear、Radial、Conic
linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。
CSS グラデーション 背景
配色ハーモナイザー
配色ハーモナイザー - 定番配色ルール
基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。
Palette Color Harmony