PhotoshopやFigmaなどデザインツールでは、乗算やリニア、スクリーンといった、2つのレイヤーが重なり部分の表示方法を設定するブレンドモード。
この設定を使用しているデザインを、CSSで対応するためのプロパティが mix-blend-mode です。
デザインソフトにある全てのブレンドモードに対応しているわけではないのですが、おおよそはカバーされています。
そんな mix-blend-mode について、どのように使用するか、どんなブレンドを指定できるかをまとめていきます。
mix-blend-mode の使い方
ここでは例として、画像の上に帯を配置し、帯に乗算（multiply）のブレンドモードを付けます。
上に重なる要素に対してブレンドモードをつけるのがポイントです。
<div class="box">
<img src="sampleimg.jpg" alt="">
<div class="band multiply"><p class="text">mix-blend-mode Multiply</p></div>
</div>.box {
position: relative;
width: 200px;
margin: 40px auto 0;
border: 1px solid;
position: relative;
img {
width: 100%;
height: 100%;
vertical-align: bottom;
object-fit: cover;
}
}
.band {
background-color: #e9e9b3;
position: absolute;
top: 20%;
width: 100%;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
mix-blend-mode: multiply;
.text {
color: black;
font-size: 20px;
font-weight: 900;
margin: 0;
text-align: center;
}
}表示例
mix-blend-mode Multiply
ブレンドモードの値の種類と効果
mix-blend-mode はたくさんのブレンドモードに対応していますが、Photoshopにあるビビッドライトやリニアライトなど、対応できないモードもあります。対応している値ではなく、していない効果を覚えておくと、書き出しにするかCSSで表現するかすぐ判断できます。
| mix-blend-mode の値 | 効果 |
|---|---|
| normal | 通常 |
| darken | 比較（暗） |
| multiply | 乗算 |
| color-burn | 焼きこみ |
| plus-darker | 合成演算子を用いた混合 |
| lighten | 比較（明） |
| screen | スクリーン |
| plus-lighter | 合成演算子を用いた混合 |
| color-dodge | 覆い焼き |
| mix-blend-mode の値 | 効果 |
|---|---|
| overlay | オーバーレイ |
| soft-light | ソフトライト |
| hard-light | ハードライト |
| difference | 差の絶対値 |
| exclusion | 除外 |
| hue | 色相 |
| saturation | 彩度 |
| color | カラー |
| luminosity | 輝度 |
【参考】
Compositing and Blending Level 1 – W3C
mix-blend-mode – CSS: カスケーディングスタイルシート | MDN
mix-blend-modeの色の計算方法を詳しく調べた記事
CSSのmix-blend-mode完全に理解したい – freee Developers Hub
mix-blend-mode の各値の実装例
先に乗算（multiply）の例を記載しましたが、他の効果もみていきましょう。
表示例
mix-blend-mode Darken
mix-blend-mode Color-burn
mix-blend-mode plus-darke
表示例
mix-blend-mode lighten
mix-blend-mode screen
mix-blend-mode plus-lighter
mix-blend-mode color-dodge
表示例
mix-blend-mode soft-light
mix-blend-mode hard-light
表示例
mix-blend-mode difference
mix-blend-mode exclusion
表示例
mix-blend-mode hue
mix-blend-mode saturation
mix-blend-mode color
mix-blend-mode luminosity
カテゴリー : HTML-CSS
