WEBデザインだけでなく、スマホアプリなどでもカラフルなメッシュグラデーションを取り入れたデザインをよく見かけるようになりました。
6/5に発売されたばかりの『Nintendo Switch2』のホーム画面では、ゲームソフトをフォーカスすると、グラデーションカラーのラインで囲われるデザインに刷新されています。（ちなみに第三次抽選も落選しました）
引用元：『ソフトをはじめる/おわる｜Nintendo Switch 2 サポート｜任天堂サポート』
https://support.nintendo.com/jp/switch2/play/use/software/index.html
目次
メッシュグラデーションとは
最近、特にデザインとしてトレンドになっている「メッシュグラデーション」とは、不規則なポイントから複数の色が滑らかに混ざり合い、立体的で幻想的な雰囲気を生み出すグラデーション手法のことです。
従来のグラデーションと比較するとこんな感じ。
メッシュグラデーションCSSジェネレーター
このようなメッシュグラデーションをCSSで出力できる便利なジェネレーターもあります。
今回は、こちらのジェネレーターで生成したメッシュグラデーションのスタイルを使用した、コピペで使えるホバーエフェクトの実装例をご紹介！
CSSサンプル集
文字色がメッシュグラデーションに変わる
background-clip を指定すれば、背景に指定したグラデーションを文字でクリッピングすることができます。
ただし、background-clip はIEやOpera miniなど一部のブラウザでは非対応のため注意。対応ブラウザ表
See the Pen
Gradient – Text by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.
ボーダーがメッシュグラデーションに変わる
グラデーションカラーのボーダーを指定するには、シンプルな線形グラデーションであれば border-image プロパティで実装できますが、border-radius（角丸）がうまく反映しない場合などもあるようです。
そのため、本記事では擬似要素（::after）を使用します。下図のようなイメージですね。
シンプルなテキストボタン
See the Pen
Gradiate – button01 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.
アイコンなどを入れてみる
サンプルではFont awesomeのアイコンを使用していますが、imgタグを使用してもOK！
See the Pen
Gradient- button 03 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.
TIPS：重なった要素の border-radius 指定について
今回の例に限らず、同じ数値の border-radius を指定した要素をそのまま上下に重ね合わせると、角の部分の余白が平行になっておらず違和感が出てしまいます。
そのような場合は、背景側の border-radius 値を 前景側の border-radius 値＋前景・背景間の余白 で指定すると、角が綺麗に表示されます！
背景色がメッシュグラデーションに変わる
シンプルなテキストボタン
あまり色数が多いとタマムシのような見た目になってしまうので（笑）、３、４色までに抑えた方が綺麗に見えると思います。
See the Pen
Gradient – button 02 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.
アイコンなどを入れてみる
サンプルではFont awesomeのアイコンを使用していますが、imgタグを使用してもOK！
See the Pen
Gradient- button 04 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.
