グラデーションは濃度差、色相差を少さくするとキレイに見える!

グラデーションは、滑らかな色調で表現できるため、良く利用されますが、使い方を間違えると、残念なデザインになってしまいます。

グラデーションがきれいに見える使い方

濃度差、色相差が少ないグラデーションを全面に配置するサイトが、上品で奥行きを感じることができますね!

色数は2色に抑え、同系色の色、または、濃淡をつけるのがおすすめです。

同系色のグラデーション

.grade1{
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
margin:auto;
height:250px;
width:250px
}
<div class="grade1 box"></div>

以下のサイトで、細かく色や比率などを調節してくれます!

CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

濃淡をつけたグラデーション

同一色での濃度を簡単に提案してくれるサイトはこちら

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

やってはいけないグラデーションの使い方

濃度差、色相差が大きいグラデーションは、いまいちなので使わないようにしましょう。

特に補色同士のグラデーションは最悪です!

動きのあるグラデーション

徐々に色を変化するグラデーションも面白いですね。

簡単に作成できるサイト

CSS Gradient Animator
A CSS generator to create beautiful animated gradients for use on your website.

でも、グラデーションを全面はデザイン慣れした人でないと、要素を置いたときにバランスが難しいような気がします。

コメント

タイトルとURLをコピーしました