5 handy css generators

CSS - March 22, 2015

Have you ever wanted to use some super cool CSS3 magic but were detered by how annoying some of them are to code? Enter these CSS Generators.


1. Cubic-Bezier.com

A great resource for generating transitions. An easy to use interface, previews of your animation and some nice presets make this a go to for me whenever a cubic bezier transition is needed.


2. CSS Animation Generator

CSS animations and keyframes are great, but sometimes it gets really annoying having to write out the same basic keyframes again and again. With similar animations to [Dan Eden's Animate.css](http://daneden.github.io/animate.css/) this generator just spits out the CSS of the animation you want instead of including a stylesheet, all you need to do is change a class name.

^ This is now something like $14 a month which is complete horseshit considering its just taken straight from animate.css, use that instead. Dan Eden’s Animate.css.


3. Triangle Generator

A Pretty popular CSS trick for a css only triangle is the ol’ border width trick. This Generator does that quickly and easily.


4. CSS Matic’s Box Shadow

Box shadows are annoying. I can never seem to remember what order the values go in and I doubt I’m the only one. On top of that, without anyway to preview you’re always going back and checking your browser to see if it looks exactly how you imagined it. Another super basic interface and the choice of either outline or inset makes this another great addition to the list.


5. Linear Gradients

Coming in at numero cinco is CSS3 Factory’s linear gradient generator. By far the best gradient generator I’ve found.