Pinterest Stumbleupon Whatsapp

If you are a web designer that works with modern online designs, then you would already have made use of CSS filters and how they add to the visual appeal of the design. Rather than coding up your own filters, you should check out a site called CSS FilterLab for convenience.

css filter codes

CSS FilterLab is a free to use web service that lets you get the codes for CSS filters. All you have to do is select your desired filter from a list. The next step is to adjust the filter settings to match your preferences. Depending on the filter, these settings include offset adjustment, colors, rotation angles, and more.

css filterlab

A preview of your filter’s effect can be seen on the right side of the pane on an image. Through the website’s Animate feature you can create keyframe-based animations using the filters. The code of your filters and animations is generated under the image from where you can copy it.

CSS FilterLab: Get Codes For Customized CSS Filters Code


  • User-friendly service.
  • Your filters and animations are generated under the image from where you can copy it.
  • Lets you get custom CSS filters.
  • Shows effects of your filters on image.
  • Lets you create keyframe-based animations.
  • Similar tools: CSSLint, Gridcalc, Colorspire, CSS3 Dropshadow Generator, and Layerstyles.

Check out CSS FilterLab @

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Keith Swartz
    January 22, 2013 at 3:04 am

    Wow! This is MY kinda' sight! Thanks, M.U.O.!