For a while now, I've been applying -webkit-filter: grayscale(100%); to render an image in grayscale. But recently, I've been wondering if it's possible to tint the image blue instead. My initial thought was to utilize an SVG filter and reference it in the CSS like so:
-webkit-filter: url(filters.svg#grayscale);Within the file filters.svg is the following code snippet:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
However, this code specifically creates a greyscale filter, and I lack the expertise in SVG to develop one that tints an image blue with the color #002060.
If anyone could provide guidance or tips on how to achieve a blue tint effect, I would greatly appreciate it.