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;}