メッシュグラデーションジェネレーター

メッシュグラデーションジェネレーター: 用途

メッシュグラデーションは、複数の色のにじみが混ざり合うグラデーションで、サイトの背景、プレゼンテーション、投稿によく使われます。

ここでは2〜5色を選び、気に入るまで位置をシャッフルして、radial-gradientの重ね合わせで作られたCSSをコピーできます。ブラウザーが画像のダウンロードなしで描画します。お好みで、画面、投稿、ストーリー、リンク画像のサイズでPNGをダウンロードすることもできます。

使い方

1. 色と背景を選びます。
2. 構図が気に入るまで、シャッフルをタップします。
3. CSSをコピーするか、適切なサイズでPNGをダウンロードします。

使うタイミング

• サイトのトップ（ヒーロー）の背景。
• プレゼンや投稿のカバー。
• スマートフォンの背景画像。

よくある質問

メッシュグラデーションとは何ですか？

端から端へ進むのではなく、複数の色のにじみがさまざまな方向に混ざり合うグラデーションです。オーロラや水に落とした絵の具のような有機的な見た目になり、サイトやプレゼンの背景によく使われます。

CSSではどう作りますか？

radial-gradientを複数重ね、それぞれが1色を特定の位置に置いて端は透明にし、背景色の上に載せます。ブラウザーがすべて描画するので、画像のダウンロードは不要です。

上に置くテキストはどうしますか？

明るさの近い色を選び、すべての色とコントラストのある色のテキストにするか、テキストの背後に半透明のレイヤーを置きます。公開前にコントラストを確認してください。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール