CSS image filters are a powerful tool for adding effects to images directly in the browser. These filters allow you to manipulate the appearance of images without requiring an external graphic design tool like Photoshop and thus saving you some time possibly when it comes to web development.
In this article, I'll break down each CSS image filter property in detail, with practical examples and tips on how to use them.
What are CSS image filters?
CSS image filters are part of the filter property in CSS, which applies graphical effects to an element. These effects range from blurring and brightness adjustments to advanced color transformations like adjusting saturation and contrast. You can use filters on any HTML element, but they are most commonly applied to images and background elements.
The syntax for applying filters looks like this:
img{
filter: blur(5px);
}
The filter property contains multiple filter functions that can be set along with their respective values. the filters that use percentage values (50%) also accept decimal values as input (.50).
And again, note that these filters are not just for images. They can be used on any HTML element. However, they tend to make the most sense when working with actual photography.
CSS filter properties: The complete list
Let’s break down every available CSS filter property and how it works:
1. blur()
The blur() filter creates a Gaussian blur effect on an image, softening its edges and details.
filter: blur(radius)
The radius value sets the intensity of the blur, specified in pixels (e.g., 5px, 10px, etc). The higher the value, the more blurred the image becomes.
For comparison, the following 2 images have a different blur radius set.
blur(2px)
blur(5px)
Ideal for creating backgrounds with text overlays or adding depth to an image.
2. brightness()
The brightness() filter adjusts the brightness of an image and the syntax looks like the following:
filter: brightness(value)
The value is a number where 1 represents the original brightness. Values above 1 increase brightness, and values below 1 darken the image.
brightness(1)
brightness(1.4)
brightness(2.4)
You can use this filter to either highlight images on a darker theme, or to tone down images that might be too bright.
3. contrast()
The contrast() filter modifies the contrast levels of an image and the syntax looks like the following:
filter: contrast(value)
The value is a number where 1 represents the original contrast. Values greater than 1 increase contrast, and values between 0 and 1 decrease it.
contrast(1)
contrast(2)
contrast(.3)
This filter is perfect for making images pop or for creating dramatic effects.
4. grayscale()
The grayscale() filter converts an image to grayscale and has the following syntax:
filter: grayscale(value)
The value is percentage or decimal (e.g., 50% or 0.5). 100% or 1 fully desaturates the image, making it black and white.
grayscale(.3)
grayscale(.9)
Good for creating a monochromatic look or to use on placeholder images.
5. hue-rotate()
The hue-rotate() filter shifts the image’s colors along the color wheel.
filter: hue-rotate(angle)
The value in this case refers to the degree of rotation (e.g., 90deg, 180deg). A full rotation is 360deg.
hue-rotate(0)
hue-rotate(90deg)
hue-rotate(360deg)
Can be useful for fine-tuning image colors to match a specific theme.
6. invert()
The invert() filter inverts the colors of an image.
filter: invert(1)
The value is a percentage or decimal. 100% or 1 completely inverts the colors, while 0% makes no changes.
invert(0)
invert(1)
invert(.3)
Useful for creating night-mode variants.
7. opacity()
The opacity() filter adjusts the transparency of an image.
filter: opacity(value)
The value is a percentage or decimal. 100% or 1 is fully opaque, while 0% or 0 makes the image fully transparent.
opacity(1)
opacity(.2)
Great for blending images with backgrounds or to create fade in / fade out effects.
8. saturate()
The saturate() filter adjusts the intensity of an image’s colors.
filter: saturate(value)
The value is a number where 1 is the original saturation. Values greater than 1 increase saturation, while values between 0 and 1 desaturate the image.
saturate(1)
saturate(2)
saturate(.5)
Useful for making colors pop on an image or for toning down overly saturated images.
9. sepia()
The sepia() filter gives an image a warm, brown tone reminiscent of old photographs.
filter: sepia(value)
The value represents a percentage or decimal. 100% or 1 applies full sepia, while 0% makes no changes.
sepia(0.8)
sepia(.1)
Add vintage look and feel to your images
10. drop-shadow()
The drop-shadow() filter adds a shadow effect to the image. Unlike the box-shadow property, it follows the shape of the image content.
filter: drop-shadow(offset-x offset-y blur-radius color)
The possible values for the drop-shadow property are as follows:
offset-x and offset-y: Horizontal and vertical shadow offsets.
blur-radius: The amount of blur applied to the shadow.
color: The shadow color.
drop-shadow(10px 10px 5px rgba(0, 0, 0, .5))
filter: drop-shadow(0 0 10px cyan) drop-shadow(0 0 20px cyan) drop-shadow(0 0 30px blue)
Great for creating realistic shadows on images. Notice how you can add multiple drop-shadows to a single element in order to create more vibrant designs like the one seen above.
Combining Filters
You can combine multiple filters for complex effects by chaining them together, separated by spaces.
This combines grayscale, blur, and brightness adjustments into one effect.
filter: grayscale(0.5) blur(2px) brightness(1.2);
grayscale(0.5) blur(2px) brightness(1.2)
And as shown above, you can even stack drop-shadows together in order to get more custom effects.
Browser support
CSS filters are widely supported in modern browsers currently, including Chrome, Edge, Firefox, and Safari. However, if you need to support older browsers, consider using a fallback image or JavaScript-based solutions.
Practical applications
There a few scenarios in web design/development where CSS filters stand out in terms of usefulness.
Adjust images on the fly for dark/light mode using invert() or brightness().
Create engaging hover animations by transitioning between different filters.
Improve accessibility and readability by tweaking contrast or brightness.
Apply filters like sepia() or grayscale() to create a specific mood for a theme.
Final Thoughts
CSS image filters are a simple yet versatile way to add creative effects to your web designs. Whether you want to make subtle adjustments or dramatic transformations, these filters give you the tools to enhance your images without ever leaving your code editor.
Explore and experiment with combinations to discover unique effects that make your designs stand out!