アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

グラデーションを作る時に役立つサイト5選

投稿日:2018-12-21 更新日:

ギャラリーサイトを見ていると、グラデーションを使ったデザインをよく見かけますよね。

中でも、色の変化の仕方が綺麗なサイトだとつい見とれてしまいます。

私も綺麗なグラデーションを取り入れたデザインを作りたいなーと思ってやってみるんですが、これが意外と難しくて…!

自分の感覚だけで作ったグラデーションだと、色の変化が不自然だったりして全然綺麗じゃないんです…。

そこで自分で考えるんじゃなくて何か参考になるサイトがないかな〜と調べてみたら、いくつか良いところを発見したのでご紹介します!

 

Egg Shape Background Gradients

http://www.eggradients.club/

卵の形がなんとも可愛らしいこちらのサイトでは、168種類ものグラデーションパターンが用意されています。

黄色・ピンク・紫などの色合いに絞ってグラデーションを表示することも可能です。

 

CSS Colour Gradients with GradPad

http://ourownthing.co.uk/gradpad.html

下部のスライダーを動かすことでグラデーションを調整することができるので、自分でいじりながらいい感じのグラデーションを作りたい、という人にオススメのサイトです。

ベースとなるグラデーションを変更したい場合は、上にある「Gradient Gallery」から選ぶことができます。

 

coolhue

https://webkul.github.io/coolhue/

色相を変化させた美しいグラデーションパターンが豊富に揃っているサイトです。

気に入ったグラデーションのCSSコードをコピーできるのはもちろん、PNGとして保存することも可能です。

 

uiGradients

https://uigradients.com/

こちらのサイトでは、自分でカラーを調整することはできないので、既に用意されたグラデーションを見て参考にしたいという方にオススメです。

右上にあるメニューからグラデーションの向きを変えたり、そのグラデーションのCSSコードやJPEG画像を取得することができます。

グラデーションパターンの一覧は、左上の「Show all gradients」から見ることができますよ。

 

0to255

http://www.0to255.com/

こちらのサイトは、同一色相のカラーを使用したグラデーションの変化を表示してくれるサイトです。

派手すぎないグラデーションを作りたいときにとくに参考になるサイトだと思います。

 

まとめ

いかがでしたでしょうか?

上記以外にも様々なサイトがありますが、今回は個人的に操作が単純で、使いやすいと思ったサイトのみ厳選してご紹介しました。

もっと自分なりのグラデーションを作成したい!という方は、shadeというサイトがおすすめです。ご紹介した「GradPad」よりも更に微調整ができるので、直感的にグラデーションを作成することができますよ。

紹介は以上となりますが、気に入ったサイトがあればブックマークをして、ぜひグラデーションを作る時の参考にしてみてくださいね。

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Googleの便利な検索方法

日常的に使うGoogle検索ですが、便利な検索の仕方があるのを皆さんはご存知ですか? 私はこの検索方法を知った時は、「今までなんで知らなかったんだろう…」とすごく損した気持ちになりました。 …

ウェブサイトの配色を解析してくれる「Web Colour Data」

ウェブサイトを作る時、配色をどうするかも悩みどころの1つですよね。 そんな時は、ウェブサイトで使われている色を解析してくれるサイト「Web Colour Data」が便利です! 制作するサイトの同業他 …

ポリゴン風の背景画像やイメージを生成してくれるジェネレーター

Webサイトや、バナーなどのバックグラウンドなどでよく使われているポリゴンスタイル。 素材サイトなどでも探すことはできますが、なかなかデザインに合うものが見つからない時もありますよね。 そこで今回は、 …

建物のイラストに特化した「Town illust」

今回は、建築物やオブジェなどのイラストに特化した素材サイト「Town illust」をご紹介します。 建物のイラストならここに勝るサイトはないのでは、と言うくらい充実していますよ!   「T …

【Photoshop】画像の白い部分だけを透過させたいときの方法

今回は、Photoshopで画像の白い部分だけを透過させたいときの方法についてご紹介します。 ダウンロードした素材を切り抜いて使いたいときなど、この方法を使えば簡単に行うことができるのでおすすめです。 …