こんにちは。鍋に入った春菊とマロニーは溶けるまで煮るタイプのWebクリエイター、矢口です。
今回はCSSのブレンドモード（background-blend-mode、mix-blend-mode）で背景にフィルター加工を施す方法について紹介したいと思います。

基本

まずは基本形となるHTML/CSSを記述していきます。

See the Pen
WNoeEre by Nako (@mr_nako)
on CodePen.

画像はbackground-imageとして、動画の方はvideoタグで記述しています。
画像にbackground-blend-mode、動画にmix-blend-modeを当てていきます。

スクリーン

スクリーンを重ねたような（光を掛け合わせたような）見え方になります。

See the Pen
JjbPyGO by Nako (@mr_nako)
on CodePen.

海がメロンソーダになったようですね。
こちらは背景色が濃いほど元の色に近くなります。

オーバーレイ

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。

See the Pen
gOLYxPq by Nako (@mr_nako)
on CodePen.

神秘的なメロンソーダですね。森の中にあるメロンソーダって感じです。
個人的にはイラストなどにもよく使われる効果、というイメージです。

ソフトライト

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。
やわらかい光を当てたような印象になります。

See the Pen
bGVbrpV by Nako (@mr_nako)
on CodePen.

ハードライト

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。
強めの光を当てたような印象になります。

See the Pen
QWGLMNw by Nako (@mr_nako)
on CodePen.

他にも様々な効果を与えられますが、今回は独断と偏見の4選をご紹介しました。
簡素な素材でも効果を与えるとグッとおしゃれになり、サイトの見栄えが良くなります。
また、どちらもCSSだけで完結するので、わざわざ素材を用意しなくてもよいのが助かりますね。

なお、残念ながらブレンドモードプロパティはどちらもIEでは非対応となります。。
代替の画像を入れて対応するしかなさそうなのが難点ですね…

ちなみに溶けるまで煮たマロニーは箸でつかめなくなるので、皆さんはほどよいタイミングで食べてください。
それでは。