アラサー主婦の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

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

関連記事

Webデザイナー必須!ブルーライトカットメガネを着用しよう!

Webデザインのお仕事をしていると、長時間のパソコン作業で、目の疲れが酷くありませんか? 目がしょぼしょぼして、酷いときには頭痛までしたり…。   私も、1日8時間とか長い時間パソコンと睨 …

レトロ・ヴィンテージ風なベクター素材が揃った「Retro Vectors」

今回は、レトロ・ヴィンテージ風なベクター素材がたくさん揃ったサイト、「Retro Vectors」をご紹介します! 配布している素材もそうですが、サイト自体がとてもお洒落なのでぜひ見ていただきたいです …

Web制作会社の残業事情。Webデザイナーになった私がお答えします!

  web制作会社というと遅くまで仕事をしている、残業が多いといったイメージが強いですね。   転職するとき、実際残業がどのくらいあるのか気になるところ。   そこで今日は、実際私が働いていて残業があ …

超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介

Webサイト制作では、出番の多いアイコン。 私は以前まで画像のアイコン素材を使用していましたが、その存在を知ってからはアイコンフォントに頼りっぱなしです まずアイコンフォントについて簡単に説明すると、 …

Webデザイナー、ブチコの自己紹介。

    はじめまして、ブチコです。 初めての記事、何を書いたらいいのやらと思っていましたが、まずは簡単な自己紹介とこのブログについて書いていこうとおもいます。   これま …