I am very fond of any tool that speeds my work. These CSS code generators help a lot when you need to get some CSS code and don’t have the time to browse through references and specifications just to see how it’s done.
The CSS generators I list in this article can be used even if you have absolutely no idea about HTML and CSS. However, my approach to tools has always been that they speed your work but don’t do it for you. In other words, you’d better have some idea about CSS and HTML, so that you can check the output and make corrections, if this is necessary. These HTML5 and CSS tutorials are a good starting point, if you need to refresh your knowledge.
After this necessary clarification, we can now move on and review the CSS generators I picked.
1. CSS Layout Generator
This CSS Layout Generator is a very basic one. You can use it to create the structure of the site only. With it: “You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.”
This CSS generator is great for a quick and basic layout. You can choose either HTML5, HTML4, or XHTML doctype. In terms of layout, if you are looking for more advanced CSS stuff, you will need to add it with other generators.
2. Another CSS Layout Generator
This CSS generator has more settings than the previous one but it’s also another basic generator that is good for the general structure of the site only. After all, it’s a layout generator only and you can’t expect to generate a 100K CSS with any imaginable styles.
Similarly to the first one, this CSS generator allows to choose fixed or liquid layout, 1, 2, or no sidebars, header and footer.
3. CSS3 Generator
After you have created the layout with some of the basic CSS layout generators, it’s time to start filling your CSS with styles. This CSS3 Generator is a good starting point because it has many options, yet it is simple and straightforward to use.
You just pick what you want to generate, enter your values and copy the generated code. Most of the code is generated onsite but some of the features, i.e. gradients are created on third-party sites (ColorZilla in this case). This is hardly a problem for you, though.
4. Generate It!
Generate It! is a good choice, if you want to generate the layout plus some other options. It has more options than the other generators. For instance, for the layout you can choose among Fixed and Liquid but you also have an Alignment option (Left or Centered).
In addition to layout, you can set header, footer, horizontal menu, number of columns (Left Sidebar, Right Sidebar, Right & Left Sidebar, no Sidebar) and some extras. For any of the elements you can specify at least width and background color.
5. CSS3 Generator
This CSS3 generator doesn’t come with a bunch of options but still you might need what it has. At present, there are only 4 options (plus the ability to edit the so called Basics – i.e. border color and background).
The 4 options you can use are border-radius, box-shadow, background gradient, and opacity.
6. CSS 3.0 Maker
Unlike the previous CSS generator, this CSS 3.0 Maker has many, many options. I dare say this is one of the most comprehensive CSS generators out there.
CSS 3.0 Maker has a preview area and the option to choose compatibility for various browsers, including mobile ones. You can use this generator for:
- border radius
- CSS transform
- CSS animation
- CSS transition
- text shadow
- box shadow
- text rotation
Each of these has many options you can set and I repeat, this is one of the generators with the most functionality you will ever find.
7. Grid Designer
This generator is very different from the rest. As its name tells, it’s a grid designer and as such, it is useful to start with before you go on with layout and style options.
Grid Designer has two main sections. The first section is where you create the grid itself – i.e. you choose the number of columns (and they can be as many as you like, not limited to 3 max only), the width of the grid, gutters, and margins. All your changes are visualized right onscreen.
The second main section is about typography. There you can set paragraph and heading styles – parameters such as height, size, alignment, leading, typeface, bold, italic, underline. And of course, there is live preview of your changes.
8. Button Makers
While there are CSS generators that create a stylesheet from start to finish, sometimes you don’t need this all. Rather, you need a particular functionality only, for instance buttons.
Basically, you can choose only colors for gradients, text, hover, etc. If you want more settings, such as opacity and size, try CSS3 Button Generator.
9. Gradients with ColorZilla
Thanks to the new functionality in CSS3, now it’s possible to make gradients with CSS rather than use images. There are several GSS gradients generators but ColorZilla is my personal favorite.
ColorZilla comes with some preset gradients but it also has all the options you need to create your very own. If you don’t know what colors you want, you can even import a gradient from an image. Another advanced feature of ColorZilla is that you can choose to output the code into CSS format, or as SCSS (Sass).
10. CSS Menu Generator
If you are looking for a CSS menu generator, try this one. On the starting page you select the type of menu you want and then you have these options:
As you can see, you can set size, color, and fonts for the menu, which is basically all you need. You can also set the button names and URLs.
11. CSS3, Please
CSS3, Please is one more CSS generator to consider. It’s a good tool but because it comes with some advanced options, it’s not the most suitable generator for beginners. The layout is simple and the tool gets even better after you toggle styling (the link on the right) because the default dark background is an eye-killer.
I myself like CSS3, Please, though I must admit I haven’t used it. It sounds a bit strange that the authors themselves recommend to use Autoprefixer instead but maybe they have their reasons. This is why, if after you use CSS3, Please you see it’s not OK for you, you can try Autoprefixer as well.
CSS generators make a designer’s life much easier. Instead of typing the code on your own, you get it ready made. This automation helps to concentrate on more important things than your typing skills and if the chunk of code you made is standards-compliant. If you have never used CSS generators in your work, now you might want to give them a try.