10 Useful CSS Generators, So You Don’t Have to Remember (As Much) Syntax



by Cameron Alcorn September 8, 2014   Freebies

Syntax, who needs it? Well, it’s good to know, but sometimes, as developers, we get lazy. So, here are 10 CSS generators that I’ve found useful and turned to time and time again.

1. Box Shadow Generator

Let’s be honest, no one wants to have to remember the long and complex CSS for the box shadow property for multiple browsers. This generator, part of the Easy CSS3 Generator, is, by far, one of the easiest and most user-friendly box shadow generators.

View Generator >>

2. Border Radius Generator

So, I’ll admit that there were some more aesthetically pleasing border radius generators. However, most of them only allowed px measurements as an option, not % or em.

View Generator >>

3. Gradient Generator

This is definitely one of my favorite gradient generators. It honestly doesn’t get much easier.

View Generator >>

4. Opacity Generator

The simplicity of this tool is nice. What’s really awesome is that it will generate the opacity properties going all the way back to IE6 and Netscape Navigator.

View Generator >>

5. Text Shadow Generator

Another part of the Easy CSS3 Generator, this tool is very user-friendly, provides a preview, and the code for all browsers that support the text-shadow property.

View Generator >>

6. CSS3 Generator

This generator is awesome, covering everything from transforms, to transitions, to @fontface. However, even though there is some overlap with some of the generators on this list, there aren’t really any live previews. Still, it covers a lot and is definitely one to bookmark for later.

View Generator >>

7. Transform Generator

Definitely the nicest transform generator, this one provides live previews and an easy to use GUI.

View Generator >>

8. Keyframe Generator

There’s a bit of a learning curve with this one (and keyframes in general), but if you’re using them regularly, this is a great go-to tool for easily generating keyframes and previewing them.

View Generator >>

9. Color Picker

While it’s not strictly for use with CSS, the color picker tool can be handy when you want a live preview of a color. Also, it gives the hex and RGB values associated with the color that is picked.

View Generator >>

10. Hex to RGBA

So, you have your hex color code, but you want the RGBA version? Give Devoth’s hex to RGBA generator a try.

View Generator >>

Did you find this helpful? Follow me on Twitter for more.


Written by
Business professional by day, web developer by night, when I’m not creating solutions for my clients, I’m writing or creating meaningful content for the Web.

Posted In

Resources & Code Snippets