CSS is the foundation for style and design on the web. Using CSS streamlines web design and provides better presentation control and can improve the way search engines see your site. However, most designers don’t want to spend more time fussing over code, they just want to design a nice looking site. When writing code from scratch is too daunting, CSS code generators can be a huge help! We pride ourselves on custom web solutions, but sometimes I just don’t have the time to mess around writing css styles, so yes, I sometimes use online code generators. If you too find yourself in the position where you need to turn a job and are looking for a little shortcut to help you make container styles, css buttons, tabbed content styles, css menus and the like then here is a list of CSS code generators and a few other code generators that might just help you profit on your own web development project.

We hope you find these useful and as usual, we welcome your feedback. . . feel free to add your favorite css code generators, jquery plugins or other useful tools in the comment section below :)


1. www.csslayoutgenerator.com

CSS Layout Generator allows user to choose the document type and build a very simple site structure. It’s a good starting point, but doesn’t offer extensive template manipulation.

2. www.pagecolumn.com

This site houses a a few generators, from columns and grids to buttons and gradients.

3. www.cssportal.com

CSS Portal is a robust website featuring a ton of CSS generator tools. Including a layout generator that is super easy to use; just select from drop downs and check boxes to create your layout.

4. www.grid.mindplay.dk

Grid Designer allows you to manipulate grids, columns, and text with a pretty easy to use interface.



5. www.css3generator.com

CSS3 Generator is a handy site for editing boxes, from size to drop shadow to interior text columns, it is definitely worth checking out if you need box CSS. The one downside is the lack of a color picker makes it difficult to quickly readjust colors.

6. www.cssbuttongenerator.com

CSS Button Generator creates simple and beautiful CSS buttons without the need for any images. Very customizable, but my favorite feature is the color themes list.

7. www.css3button.net

This button generator allows for total customization of button colors, drop shadows and gradients and comes with a showcase tab, so you can use button codes that have already been generated.

8. www.css3maker.com

CSS3 Maker has a nice interface, and allows quick manipulation of color, font, shadows, borders, gradients and more. It even lists browser and mobile compatibility.

9. www.layerstyles.org

Layer Styles is unique in that it uses a Photoshop-esque style palette interface to manipulate box borders, shadows and colors. It then outputs the corresponding CSS code.


Make drop downs, fly outs, roll overs, and tabbed menus faster and easier. . .

10. www.cssmenumaker.com

CSS Menu Maker allows users to create custom, cross browser compatible website menus. The site features a library of designed menus for drop downs, flyouts, vertical, horizontal, and tabbed menu options.

11. www.cssmenubuilder.com

Site offers 300+ horizontal menus, 700+ vertical menus combinations and 200+ breadcrumb combinations, totaling over 1000 combinations not including the endless color options.


12. www.tabsgenerator.com

Tabs Generator is a great little tool if you are looking to create simple tabs and allows customization from width and height to corner radius and tab orientation.

BONUS! This is jquery, but I like this one. . . www.jqueryui.com/demos/

jquery tabbed content generator

jQuery UI is built for designers and developers alike. This site is one of my favorites. It’s quick, flexible and clean. Play around with the demos and read through the API documentation to get an idea of what’s possible.



13. www.visuallightbox.com

Okay, so this one isn’t CSS code, but it is super helpful and it is a code generator, so it made the list… Visual LightBox is a Java Script generator for web photo galleries with a nice Lightbox-style overlay effect. This code can really add a touch of pizazz to your site.

14. www.typetester.org

This site allows users to choose fonts from various lists and compare them side by side on screen. When you have a look you like, the “Get CSS” button generates the snippet of code.



15. www.html-form-guide.com

Here is a PHP form guide you can download, customize and plug-in to your website.


And there you have it – our list of 15 code generators to make your life easier. Have you used any of the ones listed here? Do you like them? Are there others you prefer or some that we have missed – comment below and let us know!