CSSで半透明のグラスlike（グラスモーフィズム）なカードを作成する方法

【作成例:背景グラデーション風】

グラスモーフィズムの表現は「透明度」と「ぼかし」を調節して作成していきます。

背景グラデーション風サンプルコード

まずは大枠のcardクラスの背景を作成していきます。

HTML

  
    <div class="card">
      <div class="color"></div>
      <div class="color"></div>
      <div class="color"></div>
    </div>
  

背景はcolorクラスを3つ用意し、各々色をつけ、cardクラスにfilter:blurを設定し、ぼかしてグラデーションっぽくなじませています。

CSS

  
    .card {
      height: 400px;
      width: 100%;
      background: rgba(255, 255, 255, 0.1); /* 透明度を10%に設定 */
      position: relative;
      border-radius: 20px;
      overflow: hidden; /* cardクラスのfilterによりぼかしではみ出る場所を隠す場合 */
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); /* ボックスに影を入れる */
      border: 1px solid rgba(255, 255, 255, 0.1); /* 白の透明度の高い枠線を入れる */
    }
    .card .color {
      position: absolute;
      filter: blur(80px); /* ぼかし */
    }
    .card .color:nth-of-type(1) {
      top: 0;
      left: 0px;
      width: 90%;
      height: 20%;
      background: #46d47f;
    }
    .card .color:nth-of-type(2) {
      bottom: 0;
      right: 0;
      width: 70%;
      height: 20%;
      background: #c93c73;
    }
    .card .color:nth-of-type(3) {
      bottom: 30%;
      right: 30px;
      width: 40%;
      height: 20%;
      background: #6434c9;
    }
  

このように表示されます

カードを重ねる場合

HTML

  
    <div class="card">
      <div class="color"></div>
      <div class="color"></div>
      <div class="color"></div>
      /* 追記 */
      <div class="card__box"> /* カードを重ねる場合 */
        <div class="card__box-inner">
          <p class="card__box-text">CARD</p>
        </div>
      </div>
      /* ここまで */
    </div>
  

CSS

  
    .card {
      height: 400px;
      width: 100%;
      background: rgba(255, 255, 255, 0.1); /* 透明度を10%に設定 */
      position: relative;
      border-radius: 20px;
      overflow: hidden; /* cardクラスのfilterによりぼかしではみ出る場所を隠す場合 */
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); /* ボックスに影を入れる */
      border: 1px solid rgba(255, 255, 255, 0.1); /* 白の透明度の高い枠線を入れる */
    }
    ...
    .card .color:nth-of-type(3) {
      bottom: 30%;
      right: 30px;
      width: 40%;
      height: 20%;
      background: #6434c9;
    }
    /* ここから追記 */
    .card .card__box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .card .card__box .card__box-inner {
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.1); /* 透明度を10%に設定 */
      backdrop-filter: blur(6px); /* 背景をぼかす */
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1); /* 白の透明度の高い枠線を入れる */
    }
    .card__box .card__box-text {
      font-weight: bold;
      color: #232323;
      font-size: 3vw;
    }
    /* ここまで */
  

このようにして背景グラデーション風のグラスモーフィズムを表現できます。

【作成例:背景画像】

背景画像サンプルコード

背景画像を用意してその上にぼかしを入れた透明度の高い要素を配置します。

HTML

  
    <div class="glassmorphism-image"">
      <div class="glassmorphism-image__card">
        <p class="glassmorphism-image__text">CARD</p>
      </div>
    </div>
  

CSS

  
    .glassmorphism-image {
      width: 100%;
      height: 450px;
      background-image: url('/img/sky.jpg'); /* 背景画像 */
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .glassmorphism-image__card {
      width: 80%;
      height: 300px;
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); /* ボックスに影を入れる */
      background-color: rgba(255, 255, 255, 0.1); /* 透明度を10%に設定 */
      backdrop-filter: blur(6px); /* 背景をぼかす */
      border-radius: 20px;
      border: 2px solid rgba(255, 255, 255, 0.1); /* 白の透明度の高い枠線を入れる */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .glassmorphism-image__text {
      font-weight: bold !important;
      color: #232323;
      font-size: 3vw !important;
    }
  

まとめ

CSSを使ってグラスモーフィズムを表現する方法をご紹介しました。

ぼかし具合やbox-shadow、背景の透明度、枠線によって見え方が変わってくるので、値を調整してみてください。