How to apply sharpness filter on html video tag using css filters

Question

I have a html <video> tag on a page. How is it possible to apply sharpness filter using css filters? I know how to use css filters, but no sharpness filter is available is css filters. I also have checked this question: How to sharpen an image in CSS? but the sample is written for divs and so complicated to apply to <video> tag.

Any suggestions and code samples appreciated.

Answer 1

There is no built-in sharpness filter in CSS. But you can create an unsharp mask using a SVG filter and reference it in CSS. However, these can be quite slow and I'm not sure they're going to be fast enough to run on a video.

div {
filter: url(#unsharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="unsharpy">
            <feGaussianBlur  result="blurOut" in="SourceGraphic" stdDeviation="5"/>
            <feComposite operator="arithmetic" k1="0" k2="1.3" k3="-0.3" k4="0"
            in="SourceGraphic" in2="blurOut" />
        </filter>
    </defs>
</svg>

The sharpness radius is controlled by the size of the blur (the stdDeviation) and the mix (k2 & k3) between the original and the blur. In an unsharp mask, the blur is sutracted from a (boosted) original - so the k2 (original multiplier) and k3 (blur multiplier) should add up to 1.

Here's an interactive toolet - which also allows you to make the contribution from the blur positive - which creates a soft-focus effect. https://codepen.io/mullany/pen/oJAjv

You can also do a more basic sharpening filter using a convolution matrix.

div {
filter: url(#sharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="sharpy">
            <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/>
        </filter>
    </defs>
</svg>