Design

40+ Useful Online Generators For Web Designers

October 11th, 2010

Generators can be a great way to save time in your web design projects. High-quality generators can create graphics or code or even layouts in a matter of seconds or minutes, things that might take an hour or more if done by hand. Below are some useful generators to help you speed up your web design process. There’s everything from color scheme tools to complete layout generators included. If you know of other useful generators out there, please share in the comments!
[fblike]

Color Schemes

A good color scheme is the cornerstone of a good website design. Coming up with unique and appropriate color schemes isn’t always easy. That’s where these color scheme generators come in handy.

Color Scheme Designer 3
Color Scheme Designer 3 has a really fantastic user interface that’s both attractive and easy to use. Just select a color, the type of color scheme you want to create (mono, complement, triad, tetrad, analogic, or accented analogic) and then make adjustments. It also lets you preview the color scheme right in light and dark website layouts.

Screenshot

ColorSchemer Online V2
ColorSchemer lets you create color palettes around RGB or HEX values, or using a color selector tool. It also has built-in tools for lightening and darkening the color schemes it generates. There are also downloadable versions for both Windows and OS X.


Kuler
Adobe’s Kuler is one of the best color scheme tools available, with multiple options for both creating and finding color schemes. To find a color scheme created by someone else, you can search or browse by newest, mot popular, highest rated, or random. They also include tools for creating a color scheme based on an image (Flickr search is built in, or you can upload your own image) or a starting color.


ColourLovers
ColourLovers offers more than just color and pattern generators; it’s an entire community based around a love of color and good design. Their color tools include basic and advanced palette generators as well as an option to create a color scheme from an image.


GenerateIt.net Color Scheme Generator
Here’s another basic color scheme generator that lets you create a scheme based around a specific color, with options to lighten or darken the scheme.


ColorBlender.com
ColorBlender.com offers both manual and automatic color palette creation tools, as well as the ability to export your palette to Photoshop or Illustrator (it also provides HEX and RGB values).


Color Palette Generator
This generator creates a color palette based on an image. Just enter any image URL and it will create two color schemes: dull and vibrant.

Layouts

If the layout you need to create is pretty standard, using a layout generator can save you tons of coding time. There are even layout generators for creating more complex grid-based layouts and for WordPress themes.

YAML Builder
Here’s a visual tool for creating a YAML (Yet Another Multicolumn Layout) design. It’s super easy to use and offers a lot of customization options.


Variable Grid System
This is a simple generator for creating grid-based CSS layouts. Just enter the column width, the number of columns, and the gutter width, and it generates a layout for you.


Blueprint Grid CSS Generator
If you like using Blueprint for your CSS layouts but want something more flexible, this generator is for you. Just enter the number of columns, column width, and margin width and it generates your CSS for you. One caveat, though: it’s no longer in active development and is not supported.


WordPress Theme Generator
This generator lets you create a WP theme, and while it’s not extremely powerful, it is a quick way to create minimalist themes (both in terms of style and functionality).


Templatr
Templatr is another simple generator for creating quick WordPress layouts. It lets you edit virtually every element in the design, all using a visual editor.


Grid System Generator
The Grid System Generator lets you create grid layouts using 960.gs, the Golden Grid, 1KB Grid, or Simple Grid. Just enter the variables for each one and it will generate a preview and give you a download link for the CSS and HTML files.


ColoRotate
ColoRotate lets you view and create color schemes in 3D. Being able to manipulate the color palette tool in 3 dimensions can lead to better understanding of how the colors in a palette relate to one another.


Wix
Wix is often thought of as just a Flash template customizer, but it can also be used to create Flash layouts from scratch, including Flash banners and widgets.

CSS

There are CSS generators for almost everything. Many of the ones featured below are for creating new CSS3 effects, but there are others for typography, setting up initial stylesheets, and creating CSS buttons.

CSS Type Set
CSS Type Set lets you create typography designs and generates the CSS for you. Just paste in text you want to modify, and then use the options at the bottom to customize it and it will generate the CSS in real-time.


CSS3 Generator v1.6
This CSS3 generator lets you generate cross-browser compatible CSS for things like rounded corners, box shadows, and @font-face. Just pick something from the drop-down menu and it shows you the appropriate generator.


CSS3.0 Maker
Here’s another CSS3 generator that lets you create a variety of different effects using CSS3. There are generators for border radius, gradients, animation, text and box shadows, and more.


CSS3 Please!
CSS3 Please! is a cross-browser CSS3 rule generator that works for things like box shadows, border radius and gradients. Just edit the underlined bits to get the appropriate code.


CSS3 Sandbox
This CSS3 Sandbox has five different generators: linear gradients, radial gradients, text properties, box properties, and transforms.


CSS3 Gradient Generator v2.0
This gradient generator lets you pick three or more colors to combine in your gradient, and uses sliders to allow you to adjust how much space each color occupies within your gradient.


PrimerCSS
Getting started on a new stylesheet can be one of the more time consuming parts of coding a website design. PrimerCSS creates a starter stylesheet for your from your HTML, with all the IDs and classes used in your design.


CSS Border Radius
Here’s a simple border radius generator that’s incredibly easy to use. All you have to do is enter the border radius for each corner. It automatically fills in all four when you enter the first one, but you can then change each one individually.


Button Maker
This button maker from CSS-Tricks lets you create custom CSS3 buttons with gradients.

Graphics

Most graphics in web design are created using Photoshop or similar photo editing programs. But creating certain kinds of graphics, like tiling background patterns that way is time-consuming and sometimes frustrating. Included below are a number of pattern generators, as well as generators for creating other kinds of graphics.

bgMaker
bgMaker is a background pattern tool that lets you create pixel-based pattern backgrounds.


Stripemania
Stripemania is a striped background image generator. Pick the strip width and spacing, the orientation, and the colors, and it generates a repeating stripe pattern.


Dotted Background Generator
This generator lets you create dotted, half-tone style backgrounds. All you have to do is put in the dot and background colors, along with the height of the pattern and it does the rest. There’s also a “random” button, which can create some truly hideous color combinations.


Striped Backgrounds
This generator creates boldly-striped backgrounds in any resolution. The randomize feature can create some interesting color schemes. Tip: for website backgrounds, download your stripes in the avatar size and then use the image as a repeating pattern.


BgPatterns
BgPatterns is possibly the most powerful repeating pattern creator online. You can choose from a variety of shapes and then customize size, rotation, placement, color, texture, and more.


Stripe Generator 2.0
Stripe Generator 2.0 lets you create repeating-stripe backgrounds. Just choose size and spacing, colors, stripe orientation, shadow, and background style (solid or two kinds of gradients). You can preview your background full-screen before downloading, too.


Tartan Maker
Plaid backgrounds aren’t often seen in web design, and part of that is likely due to the complexity of creating a tiling plaid pattern. Tartan Maker makes it as easy as choosing a few colors and using sliders to determine the size and boldness of your plaid.


Favicon Generator
This Favicon Generator lets you create a favicon from scratch or based on an image you upload.


Tabs Generator
Here’s a quick and easy generator for creating tabs for your navigation. You can choose height and width, border size, corner radius, background color and style, fill style and colors, and orientation.


CSS Menu Generator
This generator is great for when you just need a quick, simple drop-down menu. Just choose a style, create your menu items, and download.


CSS Sprite Generator
To create CSS sprites with this generator, just zip all your images and upload them. Specify the space you want between images, as well as the aspect ratio, build direction, and if there should be a background or transparency color, as well as your image specs and any CSS specs you want. It will output the sprite file, as well as the CSS for each image.


Pure CSS Menu
This site lets you create a menu with dropdowns that only uses CSS, no images. It’s simple, but it’s also quick to set up.


Typetester
Here’s a CSS typography generator that lets you test up to three fonts side-by-side, and then download the CSS for any or all of them.

Other Generators

The generators above aren’t the only online generators useful to web designers. There are generators for creating dummy text, creating forms, font kits and more. Here are some of the best:

Text Generator
Rather than using Lorem Ipsum for everything, why not get some randomly generated text? This text generator pulls text from a variety of sources. Just tell it how many paragraphs you want.


Web Form Factory
Web Form Factory takes care of the PHP programming of your web forms based on your HTML files. It can output forms that will email or submit to a database.


Faary
Faary lets you create forms quickly and easily, by just entering the form elements in a list format. Then click on generate and it will create a form you can download.


Showdown
Showdown is a port of Markdown in JavaScript. Just type in some markdown text and it will output HTML for you.


@Font-Face Kit Generator
This @font-face kit generator from Font Squirrel lets you create full kits for any font you can legally use with @font-face.


pForm
pForm is a free HTML form builder. Just choose from their pre-designed templates and then customize your form. It’s fast and they have a good selection of form designs to choose from.


Adhesiontext
Adhesiontext creates dummy text for various languages, including specific characters. In addition to Latin characters, you can also create dummy text in Cyrillic, Greek and Arabic.

Conclusion

If it will save you time and/or frustration in designing a website, why wouldn’t you use one of the generators above? Sure, there are plenty of instances where a generator won’t be useful in a particular project, but that doesn’t mean you should disregard them all together. If you know of other generators that would be useful, please share them in the comments!

[fblike]

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Tags:

88 comments for „40+ Useful Online Generators For Web Designers
  1. Armig Esfahani on October 11th, 2010 at 2:53 pm

    Really useful. Thanks!

  2. Jorge Pedret on October 11th, 2010 at 3:17 pm

    Don’t share this with anyone or you’ll spoil it: sprite.me takes the images that your stylesheets are using for backgrounds and generates a sprite image. It also generates the CSS code that you need to change in order to make that sprite image work!

    Can’t live without it anymore…

  3. Kagemitsu on October 11th, 2010 at 3:50 pm

    Amazing list, thank you so much!

  4. Ahmed Bolica on October 11th, 2010 at 4:47 pm

    Amazing list Cameron like your post
    i will add this if you don`t mind

    Test your web design in different browsers
    http://browsershots.org

    test everything — 100+ tools in one!
    http://tester.jonasjohn.de

    thanks

  5. Ryan on October 11th, 2010 at 5:34 pm

    Awesome list, I love the sprite generator. Thank you!

  6. Batfan on October 11th, 2010 at 6:51 pm

    Great list. Heres another good one

    Create CSS-only Gradients
    http://www.colorzilla.com/gradient-editor/

  7. Vladimir on October 11th, 2010 at 8:16 pm

    On your web site problems with cyrillic fonts: (
    Excellent article. Add to favorites.

  8. Baris Geçer on October 11th, 2010 at 8:50 pm

    Amazing! I found a lot of stuff

  9. adikahorvath on October 11th, 2010 at 10:44 pm

    kuler the best from color generators

  10. Darren on October 12th, 2010 at 1:05 am

    Ridiculously helpful post, thanks heaps!

  11. Madeline on October 12th, 2010 at 3:00 am

    This is an eye opening experience! Didn’t know these generators existed! It will definitely help out, going in my favs. Thanks a lot!

  12. Irene on October 12th, 2010 at 4:45 am

    Gooood stuff : )

  13. Jane on October 12th, 2010 at 5:56 am

    Thank you, maki is truly awesome!

  14. Webmaster on October 12th, 2010 at 6:30 am

    Hi

    To add to this list its worth mentioning the following website fore more useful list of 84 online generators
    http://www.itdiscover.com/links/it_tools/online_free_tools

    Regards
    Josh.

  15. Alfonse Surigao on October 12th, 2010 at 7:57 am

    This is very, very useful! Especially loving the CSS3, Sprites, and Background generators. Thank you!

  16. Marc on October 12th, 2010 at 9:00 am

    Thanks, this list is very useful.

  17. fooz on October 12th, 2010 at 9:56 am

    Thanks for sharing ;-) Love them.

  18. vasu mote on October 12th, 2010 at 10:38 am

    thanks for sharing good sites for desingers

  19. Laura Hogarth on October 12th, 2010 at 10:52 am

    Awesome <3

  20. Amr Hussien on October 12th, 2010 at 12:39 pm

    Wow.. very nice collection really Awesome.
    Thank you for your hard work

  21. Simon on October 12th, 2010 at 2:34 pm

    Thanks for useful list! Also, worth mentioning – MenuBuilder.me, IzzyMenu.com for menus and TemplateBuilder.me for generating website templates.

    Thanks!

  22. Sandaephon on October 12th, 2010 at 4:20 pm

    Definitely a handy post, because these tools make the designers’ lives a lot easier when coding layouts. Thank you very much!

  23. Childmonster on October 12th, 2010 at 6:09 pm

    Thanks for the article :)

  24. Scott on October 12th, 2010 at 7:52 pm

    This is a really great collection, well done for sharing it.

  25. David on October 12th, 2010 at 8:24 pm

    Thanks for this list – really useful!

  26. Craig Washington on October 13th, 2010 at 6:51 am

    great set of tools here, That colorotate website is a great way to view colors, helps me visualize things in a much more effective way.

  27. Elaine on October 13th, 2010 at 8:35 am

    What a fantastic list! This is going to be useful! Added to my favourites; so much I never knew about, going to look through them :) Thanks!

  28. Brendo on October 13th, 2010 at 2:22 pm

    An extremely useful list – thank you!

  29. Irfan Suleman on October 13th, 2010 at 5:03 pm

    Awesome dude, loving this post

  30. C.F. Action on October 13th, 2010 at 6:03 pm

    Awesome list… Just bookmarked it… Thank you!

  31. Jim on October 13th, 2010 at 7:57 pm

    Unbelievable. You just made my year. Thank you for this article.

  32. Maicon Sobczak on October 13th, 2010 at 8:07 pm

    Great collection! Mainly the CSS 3 generators.

  33. Alex on October 13th, 2010 at 8:39 pm

    Finally, an updated list of resources. I already use half of them but I do appreciate the link to the wordpress layout generator and the CSS3 as well.

  34. claudio on October 13th, 2010 at 9:13 pm

    Very useful list, I like the @Font-Face Kit Generator website!
    Thanks,
    Claudio

  35. Jason Williams on October 13th, 2010 at 9:40 pm

    Thanks so much for this great list!!! I love the CSS ones, nice to have when time is a big issue.

  36. Jeremy Carlson on October 13th, 2010 at 9:54 pm

    Good list. Faary seems like it might be good, I’ll have to check that one out.

  37. Tony Barnes on October 13th, 2010 at 11:04 pm

    Brilliant list – Checking them out! :)

  38. Visual Rhythm on October 13th, 2010 at 11:05 pm

    Excellent list! Great job!

  39. Attitude on October 14th, 2010 at 12:06 am

    With so many tools, even my grandmother can build a site:)

  40. Kathrine Zøllner on October 14th, 2010 at 12:15 am

    Reeeeally useful! Especially the form generators for us who don’t know backend :D Thumbs up for sharing!

  41. Waqas Khan on October 14th, 2010 at 3:07 pm

    Really useful.. I like it very much.

    Thanks for sharing

  42. satheesh on October 14th, 2010 at 3:30 pm

    really handy tools that could save lots of time, worth trying.

    sat.

    • Mellie on June 23rd, 2011 at 10:21 am

      That’s going to make thgins a lot easier from here on out.

  43. Mike on October 14th, 2010 at 5:04 pm

    Thank you, this is a great list…will definitely come in handy!

  44. Balboos HaGadol on October 14th, 2010 at 6:25 pm

    I rarely use this word, but it certainly fits: Awesome!

    As a visual learner, I’m using it as a CSS3 Tutorial+

    As soon as metrics determine 95% CSS3 saturation of my audiences (actually have several websites), then CSS3 will rule.

  45. Aniruddha on October 14th, 2010 at 6:45 pm

    Nice Stuff. Thanks

  46. Babamiya Shaikh on October 14th, 2010 at 6:48 pm

    Its really amazing, fantastic, great availability.
    It is very useful.
    Thank you so much for the great work.

  47. Jason Maletsky on October 14th, 2010 at 6:56 pm

    Absolutely awesome post! This will definitely help me speed up my designs.

  48. Naeem Akram Malik on October 14th, 2010 at 9:00 pm

    Tab generator and pForm are the coolest… i think…

  49. Mel Pama on October 15th, 2010 at 3:11 am

    So many of you are excited about this stuff that I will definetly go take a look at them.
    Thanks for sharing.

  50. François on October 15th, 2010 at 6:32 am

    Very wonderful list !

  51. sai on October 15th, 2010 at 10:14 am

    thnx

  52. David on October 16th, 2010 at 3:01 am

    http://ajaxload.info/ great for generating animated gifs for ajax loading.

  53. Anthony on October 17th, 2010 at 11:25 am

    Thank you!
    Great collection, one more very useful tool is:
    http://www.iconj.com/iphone_style_icon_generator.php
    Regards
    Anthony

  54. ltmylinh on October 17th, 2010 at 3:23 pm

    Thanks for sharing. It’s really useful.

  55. wakeupstar on October 18th, 2010 at 6:27 am

    very useful. thanks!

  56. rajendra ray on October 19th, 2010 at 8:38 am

    great collections, thank u.

  57. Trevor Munday on October 19th, 2010 at 4:30 pm

    A truly awesome list of resources. Thanks!

  58. Emiliano on October 22nd, 2010 at 5:25 pm

    Awesome! very nice post! Thanks

  59. covalic on October 23rd, 2010 at 7:27 pm

    OMG! This post is great! Very good job! Thanks

  60. michal on October 23rd, 2010 at 8:34 pm

    Greate stuff

  61. Seamus Fitzpatrick on October 24th, 2010 at 10:08 am

    AWESOME post, very very useful links there….thank you…

  62. Jeff Thorp on October 26th, 2010 at 4:16 am

    Fantastic! Thanks so much.

  63. AppleGrew on November 10th, 2010 at 6:07 am

    This is really an awesome collection. Thanks a lot. :)

  64. Michael on November 24th, 2010 at 12:38 pm

    Wow! Brilliant collection

  65. BoboDriver on December 4th, 2010 at 9:44 pm

    Nice, really nice this is one of the best list I have seen in a very long time. Have to add almost all of them to my bookmarks. thanks

  66. ketty james on December 10th, 2010 at 8:56 pm

    Hello from rainy Paris. My name is Thomas and i must say it is a fantastic site you have, i stumbled across it in Google. Your articles are helping me to improve my own English skills! I am planning to study next year in the US!
    Website Design Templates
    Thanks again!

  67. Shrikrishna Meena on December 11th, 2010 at 6:49 pm

    css3 generator is really good… “can learn practically”… Thanks.

  68. shapewear on December 13th, 2010 at 4:00 pm

    this is a very useful list.. thanks for the great share..

  69. Paul on December 20th, 2010 at 10:58 pm

    Just discovered these lists through a link on the fasthosts website. Brilliant list and can’t wait to start trying some of them. Thank You.

  70. yejun on January 26th, 2011 at 8:21 am

    Good! Thank you

  71. roy on February 23rd, 2011 at 4:26 pm

    It really help me. Thanks!

  72. Andrea on April 6th, 2011 at 12:54 pm

    Awesome, just what i was looking for!

    Good job, keep going
    A.

  73. Valerie on May 17th, 2011 at 11:13 am

    Super list of resources. Many thanks for sharing & thanks also to those who have added a few extras :)

  74. geloso78 on July 3rd, 2011 at 8:55 pm

    really cool and helpfull!!thanks

  75. Mohsin fancy on July 14th, 2011 at 2:52 am

    Great Post.. very Very resourceful..
    Thank ones again

  76. Tim on July 22nd, 2011 at 11:34 am

    Blimey…..being colour blind i was searching for some colour guide info and found your site. Well not only have you provided a wealth of information on what i was after but a load more stuff which i did not know i wanted but now realise i do!
    Thanks

  77. Ken on August 18th, 2011 at 6:45 pm

    As others have already said BRILLIANT information. Will certainly be trying a few of them this weekend.

  78. Randy on August 25th, 2011 at 3:42 am

    By far the most useful list I have seen for web development. Many sites I did not know aboit and a few I have jusr used to help qith some development.

    Thankls for putting together such a great list!

  79. dambovita on October 4th, 2011 at 2:53 pm

    Really useful. Thanks!
    Now I don’t have to pay a web designer. :)

  80. Peter on October 7th, 2011 at 1:25 am

    o_O

    Woooow, this is really fantastic! I kinda need to get a grip, I didn’t even know half of these tools were available!

    Great stuff, thank you!

  81. niki on May 12th, 2012 at 8:52 pm

    Fantastic article! I didn’t know all these things! Thanks soooo much :))

  82. Parth Kapadia on May 29th, 2012 at 10:14 am

    Very very helpful! :) Made my life way more easier :D
    Thank you!

  83. Targoviste on June 7th, 2012 at 1:27 pm

    Very very helpful! :)

  84. Agentia on October 11th, 2012 at 11:51 am

    Thank you for this useful design generator pack!

  85. bobby on October 11th, 2012 at 3:44 pm

    U made my life easy …. Thanks-a -lot Guys :)

  86. Edge on October 13th, 2012 at 1:56 pm

    This really is an impressive collection of tools. Many of them, I have used in the past years and when it comes to combining colors, those color picker tools are just essential for web design.

    Really good collection! Keep up the good work, looking forward to seeing even more from you!

  87. Naed on November 1st, 2012 at 10:44 pm

    Great collection of tools. Wish i found this a long time ago! Will be recommending this to everyone, thank you very much :D