Creating colored box shadow for grayscale image?

Creating colored box shadow for grayscale image?


I’m working on my portfolio page and I have a bunch of images on it:

I would like to keep the images black & white so I added “filter: grayscale(100%);” to the img tag in CSS. image
However, I would like them to have a blue box-shadow. The problem is that now the shadows turn grayscale too. How could I solve this?


How about nesting the image in a <div>, then set that <div> to have the box shadow?

<div class="col-sm-4">
  <div class="img-shadow">
    <img src="...">
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 1;

.img-shadow {
  box-shadow: 10px 10px 1px #caebf2;

There might be a better way to achieve this effect, but this one seems to work.

You might also want to use smaller images. You’re currently using a whopping 3500x2300 image on one of them for a small image on the page, and it takes some time to load. AFAIK, you can choose different sizes in pexels.


It worked! Thanks, Kev! And thanks for the tip on the image size.