ブレンドモード

要素を描画する際のブレンドモードを指定できるスタイル。 Photoshop のレイヤーモードとほぼ同じ。
フィルターとブレンドモードをテストできるウェブサービスがある。

フィルター同様、 PhotoShop 上でしか実現できなかったことを動的に実現する強力なスタイル。

デモ

注意

• 過去の iOS Safari では hue saturation luminosity モードに非対応の他、 Android 標準ブラウザでもほぼ未対応。
• 正確には background-blend-mode と mix-blend-mode のふたつのブレンドモードを指定するスタイルがあるが、前者は指定できるモードが少ない上に扱いづらいため、ここでは後者を扱っている。
• 対応環境が限られているため、ブレンドされないことを前提にデザインするべき。

応用例

See the Pen Gif animation + CSS animation + Blend modes by yoksel (@yoksel) on CodePen.