[CSS] 블렌드 모드

mix-blend-mode 속성을 사용하여 포토샵의 블렌딩 모드와 비슷한 효과를 낼 수 있습니다.

div {
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
    ...
}

See the Pen 블렌드 모드 by FE4902 (@fe4902) on CodePen.