How to make an image grayscale
Short answer
filter: grayscale(1) removes the color:
<img src="/media/photo-400x250.jpg" alt="" width="200" style="filter: grayscale(1);">1 (or 100%) is fully black and white, 0.5 is halfway.
Color on hover
This is a common style for partner logos and galleries:
<style>
.photo { width: 200px; filter: grayscale(1); transition: filter 0.4s; }
.photo:hover { filter: none; }
</style>
<img class="photo" src="/media/photo-400x250.jpg" alt="">Other filters
Filters are listed with spaces, and they apply in order:
<div style="display: flex; gap: 6px;">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: sepia(1);">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: brightness(1.3) contrast(1.2);">
<img src="/media/photo-200x200.jpg" alt="" width="90" style="filter: hue-rotate(120deg);">
</div>A filter only changes how the image is drawn — the file itself stays in color.
Common mistake
People put the filter on the whole card instead of the image, and everything turns gray: text, buttons, icons. Apply filter to the img itself.
Functions used in this recipe
- filter — Graphic effects on an element: blur, black and white, brightness, shadow by shape.
- transition — Animates the change of a property from the old value to the new one.
- <img> — An image.