Webデザインや普段のクリエイティブな作品に使えるグラデーションを検索できるサイトをまとめました。
キレイなグラデーションを作るのには時間がかかるものですよね。
今回ご紹介するサイトのほとんどでCSSコードやカラーコードをコピーできますので、Webデザインに役に立つと思います。
これから紹介するウェブサイトを活用して、デザインを効率的にしましょう！
グラデーション検索サイトまとめ
itmeo
１８０種類のグラデーションを用意しているウェブサイトです。
CSSをコピーしたり、Pngの画像をダウンロードして使うことができます。
SketchやPhotoshopのファイルをダウンロードもできるようです。
Gradient Hunt
数え切れないほどの豊富なグラデーションを閲覧できるサイトです。
線状や円型のグラデーションのCSSコードもコピーが可能です。
人気のグラデーションも探すことができるので、流行りのカラーも見つけられそうですね。
uiGradients
画面いっぱいのグラデーションを表示してくれるサイトです。
左上の「Show all gradient 」をクリックすれば、色ごとのグラデーションが検索できます。
色ごとのカラーコードのコピーが簡単でとても使いやすいです。
Grabient
とてもキレイなUIで様々な操作がやりやすいサイトです。
角度、カラーの位置、カラーの追加が簡単に行うことができます。
Coolhue
グラデーションの数は多くないですが、小さなパレットなので一気に全て一覧できるサイトです。
Gradient Buttons
このサイトは少し特殊で、グラデーションでデザインされたボタンの一覧を見ることができるサイトです。
ボタンの上にカーソルを持っていくと、ホバーエフェクトを見ることができます。
CSSのコードのコピーもホバーエフェクトの付いたボタンです。
EggGradient
グラデーションの卵がたくさん見られるサイトです。
色ごとのグラデーションや、ご自身でグラデーションを作成することもできます。
Coolors
グラデーションに使えそうなカラーパレットを見られるページです。
Adobe Colorのような見た目のサイトですね。
CSS Gradient
グラデーションの作成が簡単にできるサイトです。
プリセットのグラデーションの種類は少なそうですが、オンラインでグラデーションを作成するならこのサイトがおすすめです。
好きな色の画像をアップロードすると、その画像からグラデーションを作ってくれる機能もあります。
Gradient Backgrounds
この記事で紹介してきたサイトを同じページで閲覧できるサイトになります。
このサイトをブックマークしておけば、グラデーションを探すときには困ることはなくなりそうですね。
どうでしたでしょうか？
特に最後にご紹介した「Gradient Backgrounds」は便利なサイトですね。
ご自身にあったウェブサイトを見つけて、創作活動に役に立ててください
ではまた！