Filter Effect

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() 이미지의 경로를 설정합니다.

blur() IMG5 IMG4 IMG3 IMG2 IMG1 

.blur1 {filter: blur(1px);}
.blur2 {filter: blur(3px);}
.blur3 {filter: blur(5px);}
.blur4 {filter: blur(7px);}
.blur5 {filter: blur(10px);}
.blur6 {filter: blur(20px);}

brightness IMG5 IMG4 IMG3 IMG2 IMG1 

.brightness1 {filter: brightness(10%);}
.brightness2 {filter: brightness(20%);}
.brightness3 {filter: brightness(30%);}
.brightness4 {filter: brightness(40%);}
.brightness5 {filter: brightness(50%);}
.brightness6 {filter: brightness(60%);}

contrast IMG5 IMG4 IMG3 IMG2 IMG1 

.contrast1 {filter: contrast(10%);}
.contrast2 {filter: contrast(20%);}
.contrast3 {filter: contrast(30%);}
.contrast4 {filter: contrast(40%);}
.contrast5 {filter: contrast(50%);}
.contrast6 {filter: contrast(60%);}
.contrast7 {filter: contrast(0);} /*완전히 회색*/
.contrast8 {filter: contrast(1);} /*대비 변화 없음*/
.contrast9 {filter: contrast(200%);} /*대비 2배*/

grayscale IMG5 IMG4 IMG3 IMG2 IMG1 

.grayscale1 {filter: grayscale(10%);}
.grayscale2 {filter: grayscale(20%);}
.grayscale3 {filter: grayscale(40%);}
.grayscale4 {filter: grayscale(60%);}
.grayscale5 {filter: grayscale(80%);}
.grayscale6 {filter: grayscale(100%);}

hue-rotate IMG5 IMG4 IMG3 IMG2 IMG1 

.hue-rotate1 {filter: hue-rotate(10deg);}
.hue-rotate2 {filter: hue-rotate(20deg);}
.hue-rotate3 {filter: hue-rotate(30deg);}
.hue-rotate4 {filter: hue-rotate(40deg);}
.hue-rotate5 {filter: hue-rotate(50deg);}
.hue-rotate6 {filter: hue-rotate(460deg);} /*100deg 같음*/
.hue-rotate7 {filter: hue-rotate(-90deg);} /*270deg 같음*/
.hue-rotate8 {filter: hue-rotate(0);} /*효과없음*/
.hue-rotate9 {filter: hue-rotate(.5turn);} /*180deg 같음*/

invert IMG5 IMG4 IMG3 IMG2 IMG1 

.invert1 {filter: invert(10%);}
.invert2 {filter: invert(20%);}
.invert3 {filter: invert(40%);}
.invert4 {filter: invert(60%);}
.invert5 {filter: invert(80%);}
.invert6 {filter: invert(100%);}

opacity IMG5 IMG4 IMG3 IMG2 IMG1 

.opacity1 {filter: opacity(10%);}
.opacity2 {filter: opacity(20%);}
.opacity3 {filter: opacity(40%);}
.opacity4 {filter: opacity(60%);}
.opacity5 {filter: opacity(80%);}
.opacity6 {filter: opacity(100%);}

saturate IMG5 IMG4 IMG3 IMG2 IMG1 

.saturate1 {filter: saturate(0%);} /*무채색*/
.saturate2 {filter: saturate(40%);} 
.saturate3 {filter: saturate(80%);} 
.saturate4 {filter: saturate(100%);} /*효과 없음*/ 
.saturate5 {filter: saturate(200%);} /*효과 2배*/ 
.saturate6 {filter: saturate(300%);} /*효과 3배*/

sepia IMG5 IMG4 IMG3 IMG2 IMG1

이미지1
이미지1
이미지1
이미지1
이미지1
이미지1
.sepia1 {filter: sepia(0%);}
.sepia2 {filter: sepia(20%);}
.sepia3 {filter: sepia(40%);}
.sepia4 {filter: sepia(70%);}
.sepia5 {filter: sepia(100%);}
.sepia6 {filter: sepia(140%);}

Mix Filter IMG5 IMG4 IMG3 IMG2 IMG1

이미지1
이미지1
이미지1
이미지1
이미지1
이미지1
.mix1 {filter: sepia(20%) saturate(200%) hue-rotate(.6turn); }
.mix2 {filter: hue-rotate(.4turn);}
.mix3 {filter: sepia(60%) brightness(60%) hue-rotate(30deg);}
.mix4 {filter: grayscale(100%);}
.mix5 {filter: sepia(20%) blur(1px) saturate(300%);}
.mix6 {filter: contrast(50%) blur(.5px);}

Blend Mode

normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity
Porperty Description
normal 배경색의 기본 값을 정의합니다.
multiply 더 어두운 색으로 변경됩니다.
screen 더 밝은 색으로 변경됩니다.
overlay 원래 색상의 농도와 밝기를 변경합니다.
darken 어두운 색으로 변경됩니다.
lighten 밝은 색으로 변경됩니다.
color-dodge 기본 색상을 밝게 합니다.
saturation 채도의 변화로 색상이 변경됩니다.
color 색을 통해 색상을 변경합니다.
luminosity 밝기를/ 통해 색상을 변경합니다.

multiply Color5 Color4 Color3 Color2 Color1 

.multiply1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.multiply2 {
    background-blend-mode: multiply; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: aqua;
}
.multiply3 {
    background-blend-mode: multiply; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.multiply4 {
    background-blend-mode: multiply; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
}
.multiply5 {
    background-blend-mode: multiply; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.multiply6 {
    background-blend-mode: multiply; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

screen Color5 Color4 Color3 Color2 Color1 

.screen1 { 
        background-image: url(img/image26.jpg);
        background-size: cover;
    }
    .screen2 {
        background-blend-mode: screen; 
        background-image: url(img/image26.jpg);
        background-size: cover;
        background-color: aqua;
    }
    .screen3 {
        background-blend-mode: screen; 
        background-image: url(img/image26.jpg);
        background-size: cover;
        background-color: chartreuse;
    }
    .screen4 {
        background-blend-mode: screen; 
        background-image: url(img/image26.jpg);
        background-size: cover;
        background-color: brown;
    }
    .screen5 {
        background-blend-mode: screen; 
        background-image: url(img/image26.jpg);
        background-size: cover;
        background-color: blueviolet;
    }
    .screen6 {
        background-blend-mode: screen; 
        background-image: url(img/image26.jpg);
        background-size: cover;
        background-color: chocolate;
    }

overlay Color5 Color4 Color3 Color2 Color1 

.overlay1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.overlay2 {
    background-blend-mode: overlay; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.overlay3 {
    background-blend-mode: overlay; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.overlay4 {
    background-blend-mode: overlay; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
}
.overlay5 {
    background-blend-mode: overlay; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.overlay6 {
    background-blend-mode: overlay; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

darken Color5 Color4 Color3 Color2 Color1 

.darken1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.darken2 {
    background-blend-mode: darken; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.darken3 {
    background-blend-mode: darken; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.darken4 {
    background-blend-mode: darken; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.darken5 {
    background-blend-mode: darken; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.darken6 {
    background-blend-mode: darken; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

lighten Color5 Color4 Color3 Color2 Color1 

.lighten1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.lighten2 {
    background-blend-mode: lighten; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.lighten3 {
    background-blend-mode: lighten; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.lighten4 {
    background-blend-mode: lighten; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.lighten5 {
    background-blend-mode: lighten; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.lighten6 {
    background-blend-mode: lighten; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
    }

color-dodge Color5 Color4 Color3 Color2 Color1 

 .color-dodge1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.color-dodge2 {
    background-blend-mode: color-dodge; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.color-dodge3 {
    background-blend-mode: color-dodge; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.color-dodge4 {
    background-blend-mode: color-dodge; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.color-dodge5 {
    background-blend-mode: color-dodge; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.color-dodge6 {
    background-blend-mode: color-dodge; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

saturation Color5 Color4 Color3 Color2 Color1 

.saturation1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.saturation2 {
    background-blend-mode: saturation; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.saturation3 {
    background-blend-mode: saturation; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.saturation4 {
    background-blend-mode: saturation; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.saturation5 {
    background-blend-mode: saturation; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.saturation6 {
    background-blend-mode: saturation; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

color Color5 Color4 Color3 Color2 Color1 

.color01 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.color02 {
    background-blend-mode: color; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.color03 {
    background-blend-mode: color; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.color04 {
    background-blend-mode: color; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.color05 {
    background-blend-mode: color; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.color06 {
    background-blend-mode: color; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}

luminosity Color5 Color4 Color3 Color2 Color1 

.luminosity1 { 
    background-image: url(img/image26.jpg);
    background-size: cover;
}
.luminosity2 {
    background-blend-mode: luminosity; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: darkcyan;
}
.luminosity3 {
    background-blend-mode: luminosity; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chartreuse;
}
.luminosity4 {
    background-blend-mode: luminosity; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: brown;
} 
.luminosity5 {
    background-blend-mode: luminosity; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: blueviolet;
}
.luminosity6 {
    background-blend-mode: luminosity; 
    background-image: url(img/image26.jpg);
    background-size: cover;
    background-color: chocolate;
}