MESHER（メッシャー）とは

「メッシュグラデーション（mesh gradient）」をブラウザ上で作成できる無料ツールです。
単なるグラデーション（色の段階的な変化）ではなく、複数の色をキャンバス上に配置して混ぜるような、不規則で動きのある美しい背景をデザインできます。
できあがったデザインは CSS コードとして手に入るので、自分のWebサイトにそのまま使えます。

主な機能・特徴

使い方

インストール、ログイン不要ですぐに使えます。

①色を選ぶ・追加する
ベースカラーやメッシュカラー、全体の彩度・明度・色相が変更できます。
また、メッシュポイント（グラデーションの色が出る点）それぞれに色を割り当てもできます。
色はカラーピッカー等で選べます。

ランダム生成（自動で色・配置を生成するモード）を使ってみると良いインスピレーションが得られます。そこから色を微調整するのもオススメ！

②配置を調整
メッシュポイント（グラデーションの色が出る点）は追加や削除、移動もできます。
キャンバス上で動かし、色がメッシュ状に混ざる見え方を調整するのがコツ。

また、気に入ったパレットは登録して再利用できます。
何パターンか用意して比較するのもオススメです。

③CSSコードを取得
デザインが気に入ったら、ツールの「エクスポート（Export）」ボタンを押すと、CSSコードが表示されるので「クリップボードへコピー（Copy to clipboard）」からクリップボードにコピーします。

活用例

• Webサイトのトップページやヒーローヘッダー（大きなビジュアルエリア）の背景をおしゃれなグラデーションで魅せたいとき
• 背景画像を使いたくないけど、無地では味気ないという場合に、CSSで軽くてレスポンスのよい背景をつくりたいとき
• ブログやポートフォリオサイトで、色の混ざり具合や配置の変化を持たせて印象をアップさせたいとき
• UI／デザインのモックアップ（見本）を作る際に、複雑なCSSを書かずに見た目重視の背景を用意したいとき

注意点

※生成される CSS メッシュグラデーションがすべてのブラウザで完全に同じように見えるとは限りません。特に古いブラウザや特殊なモバイルブラウザでは注意

※背景が複数のグラデーションポイントを持っていたり、色点が多かったりすると描画に負荷がかかることがあります。重く感じるならポイント数を減らしたり、色の数を抑えたりするといいです。