CSS is the New Photoshop

December 26, 2025 | Read time: 4 minutes

Sponsor this newsletter to reach 9,000+ active developers

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.

CSS filter drop-shadow

                            
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.

CSS filter blur

                            
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.

CSS filter contrast

                            
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.

CSS filter grayscale

                            
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.

CSS filter sepia

                            
img {
  filter: sepia(80%);
}

7. Invert

Flips all colors to their opposite. Can create high-contrast effects, dark-mode visuals, or dramatic color changes.

CSS filter invert

                            
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.

CSS filter saturate

                            
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.

CSS filter hue-rotate

                            
img {
  filter: hue-rotate(120deg);
}

10. Opacity

Makes the image see-through. Useful for overlays, background images, or creating hover effects with subtle transparency.

CSS filter opacity

                            
img {
  filter: hue-rotate(120deg);
}

Bonus tip:

You can combine multiple filters for unique effects. For example:

CSS filter combine

                            
img {
  filter: grayscale(50%) contrast(120%) blur(2px);
}

What effect did you like the most? Let me know on X/Twitter.