私は最近知ったことなのですが、

Phtoshopのレイヤーの合成効果と同じものを、

CSS3でも設定することができます。

 

その設定には、「mix-blend-mode」というプロパティを使って次のように書きます。

 

各設定の
DEMO

 

設定できる値は基本的にPhotoshopと同じです。

実際の効果は、ブラウザによってはPhotoshopと若干異なるものもあります。

ちなみにIEの全てのバージョンとEdgeはこのプロパティに対応していませんが、

その他のモダンブラウザでは対応しています。

PCでの表示の場合、目立つ場所でまだ実用で使うのは難しいですが、

スマホでの表示や、装飾程度であれば利用できる場合もありそうです。

 

参考サイト

mix-blend-mode – CSS | MDN

Photoshop｜レイヤーパレットメニューの和訳・英訳 – Dynamite Design Blog｜海外Webデザインネタ日本語訳＆作成チュートリアル