Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

background-blend-mode

background-blend-mode は CSS のプロパティで、要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。

混合モードは background-image プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。

ブレンドモードビジュアル効果

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`background-blend-mode`	35	79	30	8	35	8
その他
`css.types.blend-mode` は CSS のデータ型で、要素が重なったときにどのように色が現れるかを記述します。 background-blend-mode または mix-blend-mode プロパティで使用されます。	35	79	30	8	59	8

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.tinted-image {
  background-image: url('photo.jpg');
  background-color: #3498db;
  background-blend-mode: multiply;
}

CSS Multiply demo.

CSS Screen demo.

CSS Overlay demo.