borderRadius Reference v1.0 </doc>

background-blend-mode

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

Background-blend-mode

mix-blend-mode

mix-blend-mode

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

.original3 {display: flex;}
.original3 > div img {width: 100%;}
.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

.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

.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

.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

.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

.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

.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

.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(10%)}
.original3.saturate > div:nth-child(4) {filter: saturate(200%)}

filter : sepia

.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%)}

Blend-mode

Blend-mode sample입니다.

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