CSSで高級感あるグラデーションを表現

はじめに
- この記事の概要
- 対象読者
高級感ある色と実装
- 金色
- 銀色
- 紺色
受賞メダルをCSSで作成
さいごに

はじめに

この記事の概要

こんにちは、たくまです！

みなさんはサイトを制作するうえで、高級感を表したいとはどのように表現していますか？

フォントを上品にする
余白を多めに取る
文字サイズを小さめにする

上記のことを意識する方は多いと思います。
その中でも、色によって高級感を演出することは多いのではないでしょうか？

黒や紺色、ポイントとして金色や銀色を使用することが多いと思います。
ここで、下の画像を見てください。

どちらが高級感があると感じますか？
おそらく、下の方が高級感という面では出ているかと思います。
上の画像は、メインカラーは同色ですが、グラデーションに白系の色を使用することで光沢を表現しています。

このように、グラデーションを使用することで同じ色でも高級感を演出することができます。
今回はCSSを用いて上記の画像を表現する方法や、他の高級感ある色の例をご紹介します！

対象読者

CSS初学者の方
高級感あるサイトを制作される方

高級感ある色と実装

金色

まずは冒頭で紹介した金色の色をご紹介します！

メインカラーは#B39855
グラデーションに使用する色は#FFF9E6 です。
ポイントは、グラデーションに完全な白色(#fff)を使用するのではなく、メインカラー系統の白色を使用することです。

上記のグラデーションを用いてボーダーを実装する際は、下記のようにコードを書きます。

<div class="underline">

.underline {
 background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
 background-repeat: no-repeat;
 width: 100px
 height: 1px
}

これで、グラデーションのあるボーダーを実装できます。

実装する上でのポイントは、2行目のようにグラデーションに用いる色をメインカラーで挟むことです。
このように記述することにより、ボーダーの中心に向かってグラデーションがかかるようになります。
逆に外側へ向かってグラデーションをかけたい場合は、メインカラーをグラデーションカラーで挟むと表現できます。

銀色

ここからは各色のサンプルを示したいと思います。
ボーダーを作成する際のコードは基本的に同じなので、割愛させていただきます。

銀色も高級感を演出する上で多く使用されるかと思います。
画像のような銀色を表現する際は、

メインカラー：#BDC3C9
グラデーションカラー：#FFFFFF

上記で実装できます。
銀色はメインカラーが元から白色に近しいため、グラデーションカラーは白色にします。

紺色

販売するサービスやコーポレートサイトに落ち着いた上品さを演出したい時に紺色は使用されるかと思います。

上記画像は、下記の色で実装できます。

メインカラー：#1D262E
グラデーションカラー：#063761

メインカラーはできるだけ暗めの紺色を設定することで、グラデーションに深みが出ます。

受賞メダルをCSSで作成

ここからは、上記で紹介した色を使用して、よく見る受賞メダルを作っていきます！
作成例はこちらです。

早速コードをお示しします。

<div class="c-medal">
  <div class="c-medal__circle">
    <div class="c-medal__star">
      <img src="<?php bloginfo('template_url'); ?>/images/star.png" class="c-medal__star-img" alt="星">
    </div>
    <div class="c-medal__text-area">
      <p class="c-medal__description">国内利用実績</p>
      <p class="c-medal__text">No.1</p>
    </div>
  </div>
</div>

.c-medal {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
  position: relative;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);

  &::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: inherit;
    background: linear-gradient(
      to right,
      $gold-color,
      $light-gold,
      $gold-color
  );
  &::after {
    top: 8px;
    left: 8px;
    position: absolute;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
    content: "";
    border-radius: inherit;
    z-index: 2;
  }
  .c-medal__circle {
    width: 156px;
    height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: solid 1px $white-color;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
  }
  .c-medal__star {
    max-width: 40px;
    width: 100%;
    margin-bottom: 8px;
    .c-medal__star-img {
      width: 100%;
    }
  }
  .c-medal__text-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .c-medal__text {
    font-size: 48px;
    background: linear-gradient(
      90deg,
      $gold-color 0%,
      $light-gold 50%,
      $gold-color 100%
    );
    background: -webkit-linear-gradient(
      0deg,
      $gold-color 0%,
      $light-gold 50%,
      $gold-color 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
  }
  .c-medal__description {
    font-size: 16px;
    color: $white-color;
  }
}

※上記コードで使用されているgold-colorやlitght-goldは先述している金色の色を使用してください。
※星は今回figmaで作成した画像を使用しています。

今回は、大きい金色の円の上に紺色の円を重ねることでメダルを表現しています。
読者の方には紺色の円にborderで金色のグラデーションを付ければいいのでは？と思われる方もいるかと思います。
僕も最初はその方法で実装しようかと思ったのですが、、
borderにグラデーションをかける際は、border-imageというプロパティを使用します。
このborder-imageが厄介で、border-radiusと併用ができません。
そのため、グラデーションをかけた円の上にサイズの小さい円を重ねることで表現するようにしています。