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.