Design - CSS - CSS3 - Resources

11 CSS Code Generators to Speed Your Work

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.”

01 - CSS Layout Generator

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.

02 - Another CSS Layout Generator

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.

03 - CSS3 Generator

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).

04 - Generate It CSS Layout Generator

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).

05 - CSS3 Generator

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.

06 - CSS 3.0 Maker

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
  • gradient
  • CSS transform
  • CSS animation
  • CSS transition
  • RGBA
  • text shadow
  • box shadow
  • text rotation
  • @fontface

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.

07 - Grid Designer

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.

07 - Grid Designer - Typography

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.

If you need to create buttons, here are two tools for this: Button Maker and CSS3 Button Generator. Button Maker is simpler to use because it has just a few options:

08 - Button Maker

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.

08 - CSS3 Button

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.

09 - ColorZilla

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:

10 - CSS Menu Generator

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.

11 - CSS3 Please

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.

About the author

Ada Ivanova is a fulltime freelancer. She finally managed to find the perfect job that allows her to combine writing, design, (some) coding, and entrepreneurship skills under one umbrella.

Share this post


  1. Allan

    Quite funny really. I went to one of those sites, clicked on one of the ads there and saw another great site you didn’t mention called http://www.generatecss.com that frankly contained more than 50 generators :O

  2. Ada

    Thanks for the link. I checked it and it’s real cool – even better than the generators I found. I guess they don’t rank very well with Google and this is why I couldn’t find them. Some of the generators on the list I’ve used for a lot of time also don’t rank well in Google but since I knew them, I didn’t need Google to show them to me. It seems ads can be useful sometimes, it’s not only junk that’s advertised all the time. :)

Leave a Comment

Subscribe To Our Newsletter