css filter property

1.custom-2 {
2  filter:  brightness(0) invert(1);
3}

1.image {
2filter: invert(1);
3 }

1 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
2  filter: grayscale(100%);

1.blur {
2  filter: blur(4px);
3}
4.brightness {
5    filter: brightness(0.30);
6}
7.contrast {
8    filter: contrast(180%);
9}
10.grayscale {
11  filter: grayscale(100%);
12}
13.huerotate {
14  filter: hue-rotate(180deg);
15}
16.invert {
17  filter: invert(100%);
18}
19.opacity {
20  filter: opacity(50%);
21}
22.saturate {
23  filter: saturate(7);
24}
25.sepia {
26    filter: sepia(100%);
27}
28.shadow {
29    filter: drop-shadow(8px 8px 10px green);
30} 
31
32
33
34
35
36
37/* URL to SVG filter */
38filter: url("filters.svg#filter-id");
39
40/* <filter-function> values */
41filter: blur(5px);
42filter: brightness(0.4);
43filter: contrast(200%);
44filter: drop-shadow(16px 16px 20px blue);
45filter: grayscale(50%);
46filter: hue-rotate(90deg);
47filter: invert(75%);
48filter: opacity(25%);
49filter: saturate(30%);
50filter: sepia(60%);
51
52/* Multiple filters */
53filter: contrast(175%) brightness(3%);
54
55/* Use no filter */
56filter: none;
57
58/* Global values */
59filter: inherit;
60filter: initial;
61filter: unset;