CSS Generators

written by: Jeff McNear

---

CSS

Generators which save you from excessive memorization

• CSS3 GENERATOR => http://css3generator.com/
  Generates all the common CSS3 parameters with the appropriate browser prefixes
• CSS COLOR FILTER GENERATOR => http://www.cssreflex.com/css-generators/filter/
  CSS Filters to change the presentation if images

MINIMIZE / MAXIMIZE

When you need to compress or de-compress a file

• CSS COMPRESSOR => http://www.cssdrive.com/index.php/main/csscompressor
  Uncompressed CSS can look sloppy and be hard to work with, but is inevitable when you are in the middle of a project. This tool will compress it for you.
• UNMINIFY => http://unminify.com/
  Minimized scripts and style sheets can be impossible to read, this tool renders them human readable

FLEXBOX PREFIXES

Flexbox has its’ own prefix issues this generator remembers the syntax for you

• AUTO PREFIXER (flexbox) => https://autoprefixer.github.io/
  Auto prefixer for flexbox CSS

CSS SHAPES

Shapes via pure CSS

• CSS TRIANGLE GENERATOR => http://apps.eky.hk/css-triangle-generator/
  Generates CSS defined triangles
• CSS ARROW PLEASE => http://www.cssarrowplease.com/
  Generates CSS defined arrows – a little trickier since it involves the :before and :after pseudo classes
• CSS 3 SHAPES PORTAL => http://www.cssportal.com/css3-shapes/
  A variety of examples of CSS shapes

Filter Generators

• cssportal.com/css-image-filter-generator
• cssfiltergenerator.com
• angrytools.com/css-generator/filter/

Custom Easing Functions

• easings.net
• cubic-bezier.com

CSS PROPERTY LISTS

• https://cssreference.io/
• http://www.htmldog.com/references/css/properties/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
• https://www.cssportal.com/css-properties/
• https://webplatform.github.io/docs/css/properties/
• https://css-tricks.com/lets-look-50-interesting-css-properties-values/