Blend

ブレンドモード指定に使用するCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO
暗：比較
暗：乗算
暗：焼きこみ
明：比較
明：スクリーン
明：覆い焼き
明暗：オーバーレイ
明暗：ソフトライト
明暗：ハードライト
差分：差の絶対値
差分：除外
色：色相
色：彩度
色：カラー
色：輝度
  • CSS
.blend.darken {mix-blend-mode: darken;}
.blend.multiply {mix-blend-mode: multiply;}
.blend.burn {mix-blend-mode: color-burn;}

.blend.lighten {mix-blend-mode: lighten;}
.blend.screen {mix-blend-mode: screen;}
.blend.dodge {mix-blend-mode: color-dodge;}

.blend.overlays {mix-blend-mode: overlay;}
.blend.soft {mix-blend-mode: soft-light;}
.blend.hard {mix-blend-mode: hard-light;}

.blend.difference {mix-blend-mode: difference;}
.blend.exclusiont {mix-blend-mode: exclusion;}
.blend.hard {mix-blend-mode: hard-light;}

.blend.hue {mix-blend-mode: hue;}
.blend.saturation {mix-blend-mode: saturation;}
.blend.color {mix-blend-mode: color;}
.blend.luminosity {mix-blend-mode: luminosity;}