簡単に美しいグラデーションを作れる便利サイト4選

昔のギラギラしたグラデーションと打って変わって、昨今では淡い鮮やかなグラデーションを見る機会が多いです。先進的でクールなイメージを持つグラデーションは一見シンプルそうに見えて、作るのが難しい。

ですが、最近はそんなグラデーションを簡単に見たり、作ったりできるサイトが増えています。そこで今回は、グラデーションを簡単に作ることができる便利サイトをいくつか紹介します！

webgradients

https://webgradients.com/

180種類の鮮やかなグラデーションがずらっと並び、「CSSコードのコピー」と「png画像ダウンロード」ができます。
それぞれのグラデーションをクリックするとブラウザ幅いっぱいがグラデーションが表示されます。
ヘッダー全体にグラデーションを適用したときのイメージもつきやすいです。アニメーションも凝っていて使って楽しいサイトです。

右上のボタンから「skech」「psd」用のグラデーションデータをダウンロードできます。

uigradients

https://uigradients.com/

スライドですらすらとランダムにグラデーションが表示され、「CSSコードのコピー」と「jpg画像ダウンロード」ができます。
左上のハンバーガーメニューを押すと、カラー別の様々なグラデーションを見ることができます。種類が多いです！

cssgradient

https://cssgradient.io/

まるでソフトを操作しているかのようにオリジナルのグラデーションを作成できるサイトです。グラデーションの向きなども変更できます。
数あるグラデーションサイトでもカスタマイズ性が高く、自分好みのグラデーションが作れます。

grabient

https://www.grabient.com/

任意でグラデーションカラーや、角度などを変更でき、ソースコードをコピーできるサイトです。
直感的に操作できて非常に使いやすいです。どちらかというとフロントエンジニア向け。

まとめ

クオリティーの高いグラデーションが簡単に作れるサイトは他にもたくさんありますが、今回は自分が個人的に好きな物を紹介しました。
いろいろなパターンがあってとても楽しいので是非使ってみてください。