CSSfiltergenerator.com

CSS filters are graphical effects akin to filters found in many popular photography apps, leveraging in-browser post-processing of images. Create Instagram like filters with non-destructive edits and/or animated effects and copy and paste the CSS code to use on your own website! CSSFilterGenerator.com lets create, save and share effects, so designers can share their favorite effects with other designers or developers.

Instructions:

Click and drag the order of the filters to change the filter order. Click the label to enable/disable each filter. Rollover/hover to see the image without filters.

Create a sharable URL of your custom filter using Create URL or Save your filter, clicking the save button.

Keyboard short cuts (Use Alt key on a Windows keyboard):

Option + C - toggle CSS code overlay
Option + X - toggle presets/change image
Esc - Close change image overlay

Q: When I share my filter URL, why does it revert to the demo image?:

While already technically feasible, this isn't a planned featured (for now) to ensure some level of user-experience.

Q: Can I use Filters on Gifs, SVGs, Videos, etc.?:

Yes!

Q: Does this degrade gracefully:

Yes. I recommend using for IE modernizr to detect if filters are supported. Using :after overlays can simulate brightness/darkness by using a simple overlay with a transparent background. Check out the codepen below for an example of Modernizr + filters. This can be chained with SVG Filters for IE10/IE11 support as well. See the advanced tab above for an example.

Q: I hit save but I can't access my saved filter from another browser or computer. What happened?

Since this site doesn't use any sort of tracking or user accounts, it uses what's known as "LocalStorage", a feature of modern web browsers, which is only accessable by that particular web browser. It's insanely efficient (saving a filter is less than 1k) but also can't be shared. This is a good thing as it ensures privacy. Right now you can only save 1 filter, although you can save filters by using the "Create URL" feature.

History

This site originally started as a codepen I created to share with a UX Designer I was working with. Realizing how useful a utility like this is, even to me as a developer, I ended up creating a fully fledged interface which became this website There are a few others sites like this out there, but none offer the ability to reorder the filters or have as robust gradient creators within the same single page app, or ability to share filters via custom URLs. There's still features I'd like to implement. Generally, this site receives a few sporadic updates a year as I find time to revisit it. The most recent update was an overhaul under the hood.

This website doesn't contain any advertisements and uses only Google analytics for barebones tracking. It's entirely free to use, and any CSS filter code it generates for you can be used in any projects without attribution. If you like this website, share it with friends, or drop me a line [email protected]. Also, check out my project, Sketch/Photoshop Favicon Creator for the obsessive or visit my obstensibly web dev related blog.

What's to come?

This project is active development, and plenty-o-features are on the way. In no particular order, planned features:

Partial Support Browser warnings. More documentation / examples. Spiffier UI. Upload your own image/use web cam.

Recent Changes

Version 1.2.1 - (Febuary 2019)

Preset overlay bugfix after ES6 conversion
Correct hotkeys
Errant typo fix
Additional photos to demo images (Beta)

Version 1.2 - (Febuary 2019)

Safari bugfix for bad syntax preventing it to work properly
Reset filter bug fix
Non ES6 warnings

Version 1.1 - (August 2018)

Better code generation: overlays are now no longer filtered.
Presets reorder filter positions (finally!). The whole code rewrite was to make this sane.
Bug fixes for data storage
Bug fixes for presets
Saved Filters correctly remember positions
Keyboard short cuts!
Custom Filters made from CSSFilterGenerator (demoing more extreme uses)
Full Screen takeover now closable by clicking the background
FireFox Bug Fix for image swap

Version 1.0 - Almost complete re-write of the underlying code to be smarter. (July 2018)

New presets and image swap overlay (No more scrolling and tabs annoying scrolling to get to the presets and overlays)
Now list orders are predictably saved and reordering of filters should be easier.
Reset now resets list orders.
DOM changes are less frequent thus better performance (although unlikely to be noticed other than benchmarks).
URLs are only generated upon request.

Version 0.9 - (January 2018)

Better responsive behavior. Swapped jQuery UI for Sortable (Better touch support) with easier dragging, and saved/shared URLs keep the order of the filters.