DEV Community: Photostockeditor

How to Make Any Image Black & White Using Only CSS (No Editing Required)

Photostockeditor — Sun, 13 Jul 2025 16:13:46 +0000

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

Change color of SVGs Images with CSS Filter

Photostockeditor — Fri, 29 Apr 2022 19:22:00 +0000

The CSS filter property provides graphical effects such as blurring or color change in the rendering before the element is displayed. Filters are commonly used to adjust the rendering of images, backgrounds or borders.

You can change the color of SVG images with Filter property.

Examples:

.red { filter: invert(67%) sepia(89%) saturate(7492%) hue-rotate(346deg) brightness(84%) contrast(146%); }

.green { filter: invert(62%) sepia(65%) saturate(3453%) hue-rotate(81deg) brightness(111%) contrast(132%); }

.blue { filter: invert(9%) sepia(100%) saturate(5655%) hue-rotate(245deg) brightness(101%) contrast(149%); }

Result:

<img class="red" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

<img class="green" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

<img class="blue" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

For convert HEXA Color to Filter Property you can use this generator:https://codepen.io/sosuke/pen/Pjoqqp

SVG Source: FFCU DesignBundles SVGs

Colorized Photos with SVG Filter 1

Photostockeditor — Tue, 12 Apr 2022 21:13:04 +0000

The feColorMatrix SVG filter element changes colors based on a transformation matrix. First we take the color we want in rgb format and next we divide each value for 255.

feColorMatrix = [ [r,0,0,0,0], // red [0,g,0,0,0], // green [0,0,b,0,0], // blue [0,0,0,1,0], // multiplyer ]

For Example for RED COLOR:

rgb = {r: 255, g: 0, b: 0, opacity: 1}
And replace each value / 255 in Matrix.

"1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0"

This Matrix is used as value of feColorMatrix

<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="red">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#red)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

For Example for BLUE COLOR:

rgb = {r: 0, g: 0, b: 255, opacity: 1}
And replace each value / 255 in Matrix.

"0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0

This Matrix is used as value of feColorMatrix

<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="blue">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#blue)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

For this examples we use b&w images for better visual result from blackwhite.pictures

Next time we will show you how to combine these colors to get duotone images.

CSS Text Portrait

Photostockeditor — Sat, 19 Mar 2022 17:34:33 +0000

p {
  background: url('https://photostockeditor.com/asset/1080/16/1607/PSE154.jpg') center no-repeat;
  background-size: cover;
  width: 110%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  line-height: 0.80;
  text-transform: uppercase;
  font-size: 0.5em;
}

Image Source