background-blend-mode

normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

종류 예시
normal 배경색의 기본 값을 정의합니다.
multiply 더 어두운 색으로 변경됩니다.
screen 더 밝은 색으로 변경됩니다.
overlay 원래 색상의 농도와 밝기를 변경합니다.
darken 어두운 색으로 변경됩니다.
lighten 밝은 색으로 변경됩니다.
color-burn 기본 색상을 밝게 합니다.
color-dodge 기본 색상을 어둡게 합니다.
hard-light 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.
soft-light 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.
difference 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.
exclusion difference와 유사하지만 더 적은 대비를 가진 색을 반환합니다.
hue 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.
saturation 채도의 변화로 색상이 변경됩니다.
color 색을 통해 색상을 변경합니다.
luminosity 밝기를/ 통해 색상을 변경합니다.

background-blend-mode

background-blend-mode

original normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

mix-blend-mode

mix-blend-mode

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

filter

filter : none | blur() | brihgtness() | contrast | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

Porperty Description
none 이미지의 아무런 효과를 주지 않습니다.
blur(px) 이미지의 블러 효과를 설정합니다.
brihgtness(%) 이미지의 밝고 어두움 정도를 설정합니다.
contrast(%) 이미지의 대비를 설정합니다.
drop-shadow() 이미지의 그림자를 설정합니다.
grayscale(%) 이미지의 그레이스케일을 설정합니다.
hue-ratate(deg) 이미지의 색조를 설정합니다.
invert(%) 이미지의 반전색상을 설정합니다.
opacity(%) 이미지의 투명도를 설정합니다.
saturate(%) 이미지의 채도를 설정합니다.
sepia(%) 이미지의 세피아 효과를 설정합니다.
url() 이미지의 경로를 설정합니다.

filter : blur

filter : blur

이미지1
이미지1
이미지1
이미지1
.original3.blur > div:nth-child(1) {filter: blur(1px);}
.original3.blur > div:nth-child(2) {filter: blur(3px);}
.original3.blur > div:nth-child(3) {filter: blur(5px);}
.original3.blur > div:nth-child(4) {filter: blur(10px);}

filter : brightness

filter : brightness

이미지1
이미지1
이미지1
이미지1
.original3.brightness > div:nth-child(1) {filter: brightness(10%)}
.original3.brightness > div:nth-child(2) {filter: brightness(20%)}
.original3.brightness > div:nth-child(3) {filter: brightness(30%)}
.original3.brightness > div:nth-child(4) {filter: brightness(50%)}

filter : contrast

filter : contrast

이미지1
이미지1
이미지1
이미지1
.original3.contrast > div:nth-child(1) {filter: contrast(10%)}
.original3.contrast > div:nth-child(2) {filter: contrast(20%)}
.original3.contrast > div:nth-child(3) {filter: contrast(30%)}
.original3.contrast > div:nth-child(4) {filter: contrast(50%)}

filter : grayscale

filter : grayscale

이미지1
이미지1
이미지1
이미지1
.original3.grayscale > div:nth-child(1) {filter: grayscale(100%)}
.original3.grayscale > div:nth-child(2) {filter: grayscale(80%)}
.original3.grayscale > div:nth-child(3) {filter: grayscale(60%)}
.original3.grayscale > div:nth-child(4) {filter: grayscale(20%)}

filter : hue-rotate

filter : hue-rotate

이미지1
이미지1
이미지1
이미지1
.original3.hue-rotate > div:nth-child(1) {filter: hue-rotate(10deg)}
.original3.hue-rotate > div:nth-child(2) {filter: hue-rotate(40deg)}
.original3.hue-rotate > div:nth-child(3) {filter: hue-rotate(80deg)}
.original3.hue-rotate > div:nth-child(4) {filter: hue-rotate(120deg)}

filter : invert

filter : invert

이미지1
이미지1
이미지1
이미지1
.original3.invert > div:nth-child(1) {filter: invert(10%)}
.original3.invert > div:nth-child(2) {filter: invert(30%)}
.original3.invert > div:nth-child(3) {filter: invert(70%)}
.original3.invert > div:nth-child(4) {filter: invert(100%)}

filter : opacity

filter : opacity

이미지1
이미지1
이미지1
이미지1
.original3.opacity > div:nth-child(1) {filter: opacity(10%)}
.original3.opacity > div:nth-child(2) {filter: opacity(30%)}
.original3.opacity > div:nth-child(3) {filter: opacity(70%)}
.original3.opacity > div:nth-child(4) {filter: opacity(100%)}

filter : saturate

filter : saturate

이미지1
이미지1
이미지1
이미지1
.original3.saturate > div:nth-child(1) {filter: saturate(10%)}
.original3.saturate > div:nth-child(2) {filter: saturate(50%)}
.original3.saturate > div:nth-child(3) {filter: saturate(100%)}
.original3.saturate > div:nth-child(4) {filter: saturate(200%)}

filter : sepia

filter : sepia

이미지1
이미지1
이미지1
이미지1
.original3.sepia > div:nth-child(1) {filter: sepia(10%)}
.original3.sepia > div:nth-child(2) {filter: sepia(30%)}
.original3.sepia > div:nth-child(3) {filter: sepia(70%)}
.original3.sepia > div:nth-child(4) {filter: sepia(120%)}

Sample01

See the Pen Spotify Colorizer Effects Using CSS Blend Modes by Vail Joy (@vailjoy) on CodePen.

Sample02

See the Pen CSS(webkit) filters by Rıza Selçuk Saydam (@rss) on CodePen.