Want to make images look better without opening Photoshop? CSS filters let you change the look of images directly in the browser. Brighten, blur, add shadows, or change colors with a single line of code. Here’s a guide to the 10 main CSS filters.
Photo used in this demo is by Jeremy Bishop.
Let’s start!
1. Drop Shadow
Adds a shadow behind the image that follows its shape. Great for lifting images off the page or giving them depth. Works with transparent backgrounds too.
I recently posted about this one on Twitter.
img {
filter: drop-shadow(2px 4px 8px #585858);
}2. Blur
Softens the image. Useful for backgrounds, hover effects, or creating a sense of depth. You can control the intensity with pixel values.
img {
filter: blur(4px);
}3. Brightness
Makes the image lighter or darker. Perfect for adjusting photos that are too dark or too bright. Values above 100% brighten, below 100% darken.
img {
filter: brightness(150%);
}4. Contrast
Increases or decreases the difference between light and dark areas. Higher values make images pop, lower values make them look flat.
img {
filter: contrast(200%);
}5. Grayscale
Turns the image into black and white. Great for minimalistic designs, hover effects, or focusing attention on layout rather than color.
img {
filter: grayscale(100%);
}6. Sepia
Gives the image a warm, old-photo look. Useful for vintage or retro designs and adding character to images.
img {
filter: sepia(80%);
}7. Invert
Flips all colors to their opposite. Can create high-contrast effects, dark-mode visuals, or dramatic color changes.
img {
filter: invert(100%);
}8. Saturate
Makes colors more or less intense. Use high values to make colors pop, low values to tone them down. Great for emphasizing or muting certain images.
img {
filter: saturate(200%);
}9. Hue-Rotate
Shifts all colors around the color wheel. Use it to experiment with color schemes, create fun effects, or subtly adjust colors without changing the image.
img {
filter: hue-rotate(120deg);
}10. Opacity
Makes the image see-through. Useful for overlays, background images, or creating hover effects with subtle transparency.
img {
filter: hue-rotate(120deg);
}Bonus tip:
You can combine multiple filters for unique effects. For example:
img {
filter: grayscale(50%) contrast(120%) blur(2px);
}What effect did you like the most? Let me know on X/Twitter.