Want to display black and white photos without manually editing each one? With just a single line of CSS, you can apply a grayscale effect to any image—great for portfolios, photography sites, galleries, and minimalist aesthetics.
✨ The CSS Trick
Apply this to any image you want to desaturate:
`
css
.bw {
filter: grayscale(100%);
}`
And just like that, your image appears in black and white.
🎯 Add Hover to Reveal Full Color
Want to show the full-color version when the user hovers?
`.bw {
filter: grayscale(100%);
transition: filter 0.4s ease-in-out;
}
.bw:hover {
filter: grayscale(0%);
}`
This is perfect for hover effects on image galleries, product showcases, or photo collections.
💡 Where You Can Use This
Online portfolios or photography websites
Preview images in black & white and reveal color on hover
Mood-driven layout design (e.g. minimalist or editorial-style pages)
UX designs where color conveys interactivity
🖇️ Bonus: Use It With Remote Images
This technique works with any image, even external ones. That means you can apply it to:
<img class="bw" src="https://yourdomain.com/images/foto-34.jpg" alt="Photo from your site">
If you’re running a photo site or free image library, this can also help highlight premium or featured content via color reveals.
✅ Browser Support
Browser Support for filter: grayscale()
Chrome ✅ Full
Firefox ✅ Full
Safari ✅ Full
Edge (Chromium) ✅ Full
Internet Explorer ❌ Not supported
You can add -webkit-filter as a fallback if you're targeting older versions of Safari.
🧠 What’s Next?
If you like this trick, here are more CSS-only image effects worth exploring:
filter: sepia(100%) → Vintage photo look
filter: blur(5px) → Soft focus or loading effect
filter: brightness(1.4) contrast(1.1) → High-impact editorial styles
Combining filters for custom B&W styles with tone control
Top comments (0)