CSS Filter Generator from Hex Code

Add your CSS code here

Add your css hex code here


Real pixel, color applied through CSS background-color:

Filtered pixel, color applied through CSS filter:

What is this tool?
Using this you can add a hex code to the input box at the top and it will create a css filter that you can apply to css, this can be used as a background or to fill the color of a PNG icon or other image. Which can be handy if you need to apply a new color to a image and dont want to edit it. You can just add the filter to a css class to apply it to an element.
You can read a bit more about the tool and how to use it here. Code Example Applied to a Logo Image
Credits for this tool are here on this codepen and stack overflow.
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
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown
Random CSS Property

contain

The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.
contain css reference