エフェクト
mix-blend-mode
mix-blend-mode は、要素の色をその後ろに描かれているものの色とどう混ぜるかを指定します。画像編集ソフトの「描画モード」と同じ考え方です。
構文<blend-mode> | plus-darker | plus-lighter …
<blend-mode> | plus-darker | plus-lighter
<blend-mode> = normal | multiply | screen | overlay
| darken | lighten | color-dodge | color-burn
| hard-light | soft-light | difference | exclusion
| hue | saturation | color | luminosityプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
90deg,
#1f2937,
#e0951a,
#ffffff
);
border-radius: 24px;
mix-blend-mode: multiply;
}コントロール
mix-blend-modemultiply
解説
モードの系統
- 暗くする：
multiplydarkencolor-burn。白い部分は消え、後ろが透けて見えます。 - 明るくする：
screenlightencolor-dodgeplus-lighter。黒い部分が消えます。 - コントラストを強める：
overlaysoft-lighthard-light。明るい所はより明るく、暗い所はより暗くなります。 - 差をとる：
differenceexclusion。同じ色どうしは黒になり、白と重なると色が反転します。 - 色の成分を入れ替える：
huesaturationcolorluminosity。色相・彩度・明度の一部だけを要素の色から取ります。
このページのプレビューでは、後ろに模様を敷き、箱には黒→オレンジ→白のグラデーションを付けているので、 暗い所と明るい所での効き方の違いを見比べられます。
混ぜる範囲を区切る
混ざる相手は、同じスタッキングコンテキストの中で後ろに描かれたものすべてです。親に isolation: isolate を付けると、その親の中だけで混ぜられます。1 つの要素の中で背景画像どうしを混ぜたいときは background-blend-mode を使います。
気をつけること
normal 以外を指定すると、その要素はスタッキングコンテキストになります。plus-darker は Safari しか対応していないため、このページのコントロールには入れていません。