CSS Filter Quiz

#1 f4

grayscale(1)

brightness(0.5)

contrast(50%)

grayscale(0)

#2 f12

contrast(99)

saturate(99)

saturate(0)

contrast(0)

#3 f20

drop-shadow(4em 0) drop-shadow(0 4em) drop-shadow(4em 4em)

drop-shadow(-4em 0) drop-shadow(0 -4em) drop-shadow(4em 4em)

drop-shadow(4em 0) drop-shadow(0 -4em) drop-shadow(-4em 4em)

drop-shadow(0 4em) drop-shadow(0 -4em) drop-shadow(4em 4em)

#4 f11

saturate(0)

saturate(9999)

contrast(9999)

contrast(0)

#5 f19

drop-shadow(0 1em) drop-shadow(0 2em)

drop-shadow(0 -1em) drop-shadow(0 -2em) drop-shadow(0 -3em)

drop-shadow(0 1em) drop-shadow(0 2em) drop-shadow(0 3em)

drop-shadow(0 -1em) drop-shadow(0 -2em)

#6 f14

invert(1)

invert(0.5)

hue-rotate(90deg)

hue-rotate(180deg)

#7 f18

drop-shadow(15px 50px)

drop-shadow(0 0 50px 15px)

drop-shadow(50px 15px 0)

drop-shadow(15px 0 50px)

#8 f1

grayscale(1)

invert(1)

brightness(0)

invert(0.5)

#9 f7

contrast(100)

invert(1)

saturate(0)

sepia(1)

#10 f16

sepia(1)

contrast(1)

grayscale(1)

brightness(1)

#11 f6

drop-shadow(0px 0px 5px)

blur(5%)

blur(5px)

drop-shadow(5px)

#12 f31

invert(1)

sepia(0)

saturate(0)

grayscale(1)

#13 f32

hue-rotate(-180deg)

hue-rotate(-360deg)

hue-rotate(180deg)

hue-rotate(90deg)

#14 f17

drop-shadow(0 30px 2px red)

drop-shadow(30px 0 2px red)

drop-shadow(0 -30px 2px red)

drop-shadow(-30px 0 2px red)

#15 f8

sepia(9999)

contrast(9999)

saturate(9999)

brightness(9999)

CSS Filter

Select the filter value that will transform the left element into the right one

#1 f4

#2 f12

#3 f20

#4 f11

#5 f19

#6 f14

#7 f18

#8 f1

#9 f7

#10 f16

#11 f6

#12 f31

#13 f32

#14 f17

#15 f8

Your Result