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

こんにちは!デザイナーの波塚です。

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

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

 

webgradients

https://webgradients.com/

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

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

 

uigradients

https://uigradients.com/

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

 

cssgradient

https://cssgradient.io/

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

 

grabient

Grabient

https://www.grabient.com/

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

 

 

まとめ

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

 

 

  • シェア
  • twitter
The following two tabs change content below.
Avatar photo

波塚浩平

デザイナー&コーダー株式会社インファクト
デザイナーの波塚です。昔からものづくりが好きで、なんでも自分でつくりたくなってしまうことが多いです。好きな言葉は「若いときに流さなかった汗は、老いてから涙となって返ってくる」です。後で後悔しないよう、今を全力で突き進みます!
  • twitter
  • このエントリーをはてなブックマークに追加
PAGE TOP
LINE it!