Free CSS Code Generator: Create Photo Filter As Instagram

Does your page have image filters like it? Many years ago this feature would need JavaScript, but today you can build the image filter as you want with only HTML and CSS.

And with cssFilters webapp you don't even need to write any CSS code!

This free tool will help you build custom image filters with CSS3 filters. With cssFilter you don't need to worry about how they work, just setting the settings and copying the code is done.

At the top of the screen you will notice a long bar filled with custom Instagram filters. These filters have included all popular options like Hudson, Toaster, Inkwell, Lofi, …

Just click any filter you like and then click on the "CSS code" tab in the upper-right corner. From there you will have both CSS and HTML code. Just copy / paste the website and you're done.

But you can also customize these filters with rollers in settings. Under the "generator" tab you can adjust some options such as saturation & contrast, both opacity, graying, sepia and some stacking styles like linear gradient or radial gradient.

Every time you switch the roller, the tool will automatically update the code so you don't have to save anything.

And you can even change the default, self-uploaded or selected image from Unsplash.

This web application made by Indrashish Ghosh runs many default classes, which can be seen in CSSgram library .

But custom settings are far different from basic presets, plus free code generation makes it a handy tool for coder and those who don't know the code. We have CSS3 generators for many features like background gradients and text shadows. And now we have cssFilters as the advanced CSS3 image filter generator.

ITZone via Hongkiat

Share the news now