スクリムグラデーション

色 ／ パターン集トップ

写真や動画の上に載せる暗い面。下から強く、上は弱く

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<div class="scrim-demo">
  <div class="scrim-demo__media" role="img" aria-label="背景"></div>
  <p class="scrim-demo__text">下から --scrim-stop まで暗くし、文字は白固定</p>
</div>

.scrim-demo {
  position: relative;
  min-block-size: 10rem;
  border-radius: 0;
  overflow: hidden;
  color: #fff;
  /* 文字を下端へ寄せるのは親の仕事。素のブロックのままだと
     子の align-self が効かず、いちばん明るい上端に文字が出る */
  display: grid;
  align-items: end;
}
.scrim-demo__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,var(--scrim-stop, .75)) 0%, rgba(0,0,0,0) var(--scrim-height, 70%)),
    linear-gradient(120deg, #4a4035, #7a6a55);
}
.scrim-demo__text {
  position: relative;   /* 面より前に出す */
  margin: 0;
  padding: var(--space-5);
  /* 幅は面が持つ。文字には幅を持たせない */
}

確認する#

• 文字色を写真の明部に依存していない
• グラデーションは下から上へ
• コントラストを実測してから値を固定

関連#

• コントラストと色覚
• 役割で色を持つ
• 出発点のCSS