5 handy css generators

— 22nd of March 2015

Have you ever wanted to use some super cool CSS magic but were detered by how annoying some of them are to write? 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 Animations

CSS animations and keyframes are great, but sometimes it gets really annoying having to write out the same basic keyframes again and again. This generator just spits out the CSS of the animation you want, all you need to do is change a class.

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.