グラデーションは、滑らかな色調で表現できるため、良く利用されます。
使い方を間違えると、残念なデザインになってしまいます。
グラデーションをCSSを利用しキレイに見せる豊富をご紹介します。
グラデーションがきれいに見える使い方
濃度差、色相差が少ないグラデーションを全面に配置するサイトが、上品で奥行きを感じることができますね！
色数は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.
cssgradient.io
色相環のグラデーションも利用する
色相環のグラデーションも自然な色の変化で使いやすいです。
インスタグラムのマークも黄色→赤→紫と色相環のグラデが効果的ですね！
濃淡をつけたグラデーション
同一色での濃度を簡単に提案してくれるサイトはこちら
WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
www.colordic.org
やってはいけないグラデーションの使い方
濃度差、色相差が大きいグラデーションは、いまいちなので使わないようにしましょう。
特に補色同士のグラデーションは最悪です！
動きのあるグラデーション
徐々に色を変化するグラデーションも面白いですね。
簡単に作成できるサイト
CSS Gradient Animator
A CSS generator to create beautiful animated gradients for use on your website.
www.gradient-animator.com
でも、グラデーションを全面はデザイン慣れした人でないと、要素を置いたときにバランスが難しいような気がします。
グラデーションとポリゴンデザイン
グラデーションとポリゴンデザインも相性が良くてよく使われるデザインです。
デザイン提案によく使われますね！
ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
Webサイトのバックグラウンドやグラフィックデザインで使用できる、簡単な操作で生成できるポリゴンジェネレーターの紹介です。
design.webclips.jp
コメント