How to sharpen an image in CSS?

Question

If I have an image loaded from an arbitrary URL (local or remote), and do not want to use javascript nor server-side processing, is it possible to sharpen it from client-side with CSS?

Answer 1

Yes, for some browsers this is already possible (like Chrome and Firefox).

In particular, you need mix-blend-mode and CSS filters.

Here's a codepen with the Lenna image as example, and a (compiled) copy of it as a code snippet:

.foo,
.bar,
.bar::after,
.baz {
  width: 512px;
  height: 512px;
  position: absolute;
}
.foo {
  z-index: 1;
  mix-blend-mode: luminosity;
  opacity: 0;
  overflow: hidden;
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);
}
.foo:hover {
  opacity: 1;
}
.bar,
.bar::after,
.baz {
  background: url(https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png);
}
.bar::after {
  content: '';
  -webkit-filter: blur(4px) invert(1) contrast(0.75);
  filter: blur(4px) invert(1) contrast(0.75);
  mix-blend-mode: overlay;
}

<div class="foo">
  <div class="bar"></div>
</div>
<div class="baz"></div>

Hover over the image to see the effect. Tweaking of parameters (and maybe using opacity to "fade" the effect, similar to the "intensity" setting of unsharp mask) can help in yielding more desireable results for particular use-cases.

Answer 2

I found a hack that will sharpen downscaled images using CSS. It only works in Chrome, but from my experience Chrome seems to blur images more so than other browsers. This will basically "undo" the blurriness and make the image look more like the original. Layer the image on top of itself using absolute positioning and set image-rendering to pixelated. An example is given here:

Weird CSS hack for sharpening images (Chrome 59 and 60 only)