The CSS filter property provides graphical effects such as blurring or color change in the rendering before the element is displayed. Filters are commonly used to adjust the rendering of images, backgrounds or borders.
You can change the color of SVG images with Filter property.
Examples:
.red {
filter: invert(67%) sepia(89%) saturate(7492%) hue-rotate(346deg) brightness(84%) contrast(146%);
}
.green {
filter: invert(62%) sepia(65%) saturate(3453%) hue-rotate(81deg) brightness(111%) contrast(132%);
}
.blue {
filter: invert(9%) sepia(100%) saturate(5655%) hue-rotate(245deg) brightness(101%) contrast(149%);
}
Result:
<img class="red" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">
<img class="green" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">
<img class="blue" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">
For convert HEXA Color to Filter Property you can use this generator:https://codepen.io/sosuke/pen/Pjoqqp
SVG Source: FFCU DesignBundles SVGs
Top comments (0)