Filters
Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.
Note: The interactive widgets in this playground may be laggy due to the computation required to apply filter
to elements.
Below, you can choose from a few images I’ve chosen.
Background Image
.image {
background-image: url(http://i0.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg);
}
Blur
blur()
applies a Gaussian blur to the element. The length used determines the radius of the blur.
Filter
.image {
filter: blur(0px);
}
Brightness
brightness()
modifies the brightness of the image. A value of 0.4 is equivalent to 40%.
Filter
.image {
filter: brightness(0%);
}
Contrast
contrast()
changes the contrast of the image. This will typically change the color of the element. A value of 0.4 is equivalent to 40%.
Filter
.image {
filter: contrast(0%);
}
Drop Shadow
drop-shadow()
applies a drop shadow onto the element. This is very similar to `box-shadow. I’ve chosen not to include the spread-radius value because some browsers will not render the shadow if there is a spread radius. Read more about it here.
Filter
.image {
filter: drop-shadow(10px 10px 10px #194d33);
}
Grayscale
grayscale()
converts an image to grayscale. It basically turns the image black and white. Values between 0 to 100% are valid values. A value of 0.4 is equivalent to 40%.
Filter
.image {
filter: grayscale(0%);
}
Hue Rotate
hue-rotate()
rotates the hue of the element. You can pass hue-rotate any normal angle value like 45deg
or 3.14rad
.
Filter
.image {
filter: hue-rotate(0deg);
}
Invert
invert()
will invert the color within the element. A value of 0% produces an unchanged color and a value of 100% produces a completely inverted color. A value of 0.3 is equivalent to 30%.
Filter
.image {
filter: invert(0%);
}
Opacity
opacity()
changes how opaque or transparent the image is. A value of 0% produces an invisible element and a value of 100% produces a visible element. A value of 0.3 is equivalent to 30%.
Filter
.image {
filter: opacity(0%);
}
Saturate
saturate()
changes the saturation (amount of color). A value of 0.3 is equivalent to 30%.
Filter
.image {
filter: saturate(0%);
}
Sepia
sepia()
turns the image into a sepia color (reddish-brown). A value of 0.3 is equivalent to 30%.
Filter
.image {
filter: sepia(0%);
}
Multiple filters
You can also apply multiple filters at the same time by adding multiple filter functions.
Filter
.image {
filter: blur(0px) invert(0%);
}
Conclusion
Filters are a great way apply image changes in browser without having to change the source image. If you’re interested in real documentation on filters, here is a link to the MDN documentation.
Hopefully this is a good tool for anyone curious about CSS filters. If you found this useful, feel free to share it with others.