Posted in css filters
260
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
115
This Month
482
This Year
2195

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
Even if you fall on your face, you're still moving forward.
Victor Kiam
Random CSS Property

scale()

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
scale() css reference