Posted in css filters
237
4:40 am, August 16, 2022
 

CSS Filter Generator from Hex Code Usage Example

quick example of how to apply a css filter to change logo or image color using this tool

HTML

<h3>Normal Logo</h3>
<div class='my-logo'>
	<img src="https://kruxor.com/images/kruxor_logo_small.png">
</div>

<h3>Filter Logo</h3>
<div class='my-logo my-logo-filter'>
	<img src="https://kruxor.com/images/kruxor_logo_small.png">
</div>

CSS

.my-logo-filter {
	filter: invert(40%) sepia(89%) saturate(665%) hue-rotate(153deg) brightness(104%) contrast(103%);
}

Normal Logo

Filter Logo

View Statistics
This Week
94
This Month
459
This Year
2172

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown
Random CSS Property

table-layout

The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.
table-layout css reference