CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
Post on:2024年8月7日
sponsors
最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。
この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。
MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。
MSHRの使い方は、簡単です。
サイトにアクセスして、まずは好みのメッシュグラデーションを見つけます。
ブルーのメッシュグラデーション「Paula」を選択してみました。
そのまま利用する場合は、「Get Code」をクリックすると、CSSが表示されます。
PaulaのCSSは、下記の通り。
class名は自由に変更できます。
|
1 2 3 4 5 |
.your_css_selector_here { background-color: hsla(161, 77%, 83%, 1); background-image: radial-gradient(circle at 7% 81%, hsla(172, 91%, 91%, 1) 16%, transparent 53%), radial-gradient(circle at 5% 1%, hsla(238, 76%, 61%, 1) 7%, transparent 84%), radial-gradient(circle at 39% 52%, hsla(137, 93%, 64%, 1) 6%, transparent 68%), radial-gradient(circle at 11% 29%, hsla(201, 97%, 75%, 1) 8%, transparent 74%), radial-gradient(circle at 90% 50%, hsla(106, 94%, 89%, 1) 2%, transparent 85%); background-blend-mode: normal, normal, normal, normal, normal; } |
メッシュグラデーションは、classを付与するだけで使用できます。
|
1 |
<div class="your_css_selector_here"></div> |
実際の表示は、こんな感じです。
メッシュグラデーションは、アニメーションさせることもできます。
独自のメッシュグラデーションを作成する場合は、右上「Create」をクリックします。
各色を変更したり、Hueを変更したりして、メッシュグラデーションをカスタマイズできます。
Hueを変更したメッシュグラデーション
右上「Randomize」からはランダムにメッシュグラデーションが生成されます。
ランダムにメッシュグラデーションを生成
sponsors
