40 Online Generators for Web Designers Should Bookmark

March 5, 2011 · 134 comments

by Dustin Betonio


Online Generators for Web Designers 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. Online generator are those tools that help us to create those popular “XHTML valid” CSS banners, micro buttons or css website templates in seconds. In such cases online generators can be of great help which do the necessary job and some tools don’t have to be downloaded also. We all know that backgrounds play a crucial role in a design. Web Designers sometimes spend a lot of time in making pattern or stripe backgrounds and there are also tool to help you out here. In this article, I have listed some of the online generators that can save you some time and still give you great results.



Online Generators

1. XML Charts


XML /SWF charts are used to create attractive graphs and charts from XML data, Create a source either manually or generate dynamically then pass it to the XML chart’s flash file.

2. Web Form Generator

web form generator

The web form generator from Web Form Factory automatically generates he necessary backend code to tie your form to a database.

3. Typetester


Typetester is used to compare three different type of fonts on screen making your designing job easier , Just specify the specifications and compare them

4. 256 Pixels


256 Pixels creates favicon designs where you can upload a picture or color the pixels by choosing any color and save it or create a favicon for any new challenges posed by the website.

5. 80 x 15 brilliant Button Maker


Create 80 x 15 dimension buttons with 80 x 15 brilliant button maker where you can customise by setting the borders, left and right boxes and uploading the images separately for left and right boxes.

6. AJAX Info

ajax info

Create your own AJAX loader icon by selecting the type of indicator, background and foreground color and clicking in ‘Generate It’.

7. AJAX loading GIF generator

ajax loading

AJAX Loading GIF generator create your AJAX loading GIF image by defining the indicator type, background color, foreground color and controlling the speed of the loading indicator.

8. Background Maker

background maker

A unique background maker where you choose the colors from the pixelised tile which depicts the tiled background and fill each tile or pixel with a different color to watch it live in the background as a pattern.

9. Background Patterns

background patterns

Tiled background designer is quite an interesting tool to create tied backgrounds which allows you to change the background color, size of the canvas, image to be displayed and also rotated your tiled design as per your design.

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

11. 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 images.

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

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

14. Badges


Badges can be used to display a big ‘Beta’ message on your website or emphasize a price or a promotion. No web 2.0 site is complete without one.

15. Barcode Generator

barcode generator

Barcode label printer is an online barcode generator where a CGI form is used to enter a text and generate a printable and scannable barcode in Interleaved 2 of 5, Code 39, Code 128 A, B, or C symbologies.

16. Buttonator


Buttonator is a free web button maker to create your own personalized web buttons. You can customise the button’s font, color, style and apply different effects for your button.

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

18. Showdown


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

19. Faary


Faary lets you create forms quickly and easily, by just entering the form elements in a list format.

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

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

22. CSS Menu Generator


This generator is great for when you just need a quick, simple drop-down menu.

23. Tabs Generator


You can choose height and width, border size, corner radius, background color and style, fill style and colors, and orientation.

24. Favicon Generator


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

25. Color Mixer

color mixer

Create a new color by mixing colors, Color /mixers is a fun tool to fine tune and fiddle with a color with editable RGB colors and adjustable lightness and darkness.

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

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

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

29. CSS Border Radius


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.

30. CSS3 Sandbox


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

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

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

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

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

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

36. Contact Form Generator


Contact Form Generator is used to create form to email scripts for your ASP, PHP or Perl website with no programming. Just enter the email header fields like email from, email to and subject to create the form.

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

38. YAML Builder


Here’s a visual tool for creating a YAML (Yet Another Multicolumn Layout) design.

39. Create Graph


Create a graph as bar graph, line graph, pie chart etc.. by selecting the default graph type and defingin the design such as style, shading, data set ie number of fields, data labels and your graph is created.

40. CSS Optimiser

css optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 24 comments… read them below or add one }

Atlanta SEO company | SEO Providers in Atlanta August 8, 2013 at 7:57 am

Hello There. I found your blog using msn. This is a really well written article.

I’ll make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will certainly comeback.


oral health associates August 2, 2013 at 10:39 am

You need to take part in a contest for one of the most useful blogs on the internet.
I’m going to highly recommend this site!


omegle girls July 27, 2013 at 10:51 pm

Very nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to your
rss feed and I hope you write again soon!


stop tonsil stones bad breath July 25, 2013 at 12:15 am

What’s Taking place i’m new to this, I stumbled upon this I
have discovered It positively helpful and it has helped me out loads.

I hope to give a contribution & aid different customers like its helped me.
Good job.


Visit Home Page July 5, 2013 at 6:58 pm

Excellent posting. I was checking frequently this site with this particular empowered! Extremely helpful information precisely the final step :) I actually look after similarly info considerably. I became looking for the following selected facts for your pretty very long period. Thanks and also with fortune.


managed network services provider March 11, 2013 at 12:54 pm

Undeniably believe that which you stated. Your favorite reason seemed to be on the net the simplest thing to be aware of.

I say to you, I definitely get annoyed while people consider worries that they
just don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks


Alex Sørlie February 13, 2013 at 8:33 am

Very nice though some of these are rather obvious and if someone has to use them they have failed life as a webdesigner.
However, I was surprised to not see any gradient generator


Kate Hamers January 18, 2013 at 3:27 am

This is really interesting, You are a very professional blogger. I have joined your feed and look ahead to looking for more of your great post. Also, I’ve shared your site in my social networks|


File Sharing Online December 1, 2012 at 8:53 am

What’s up colleagues, good piece of writing and fastidious arguments commented here, I am genuinely enjoying by these.


diy wood November 18, 2012 at 9:24 am

Aw, this was a гeally good post. Spending some timе аnd actual еffoгt to creаte
a verу good аrtiсle… but what саn I
ѕay… I procrastinаte a lоt аnd don’t manage to get nearly anything done.


natural sleep November 16, 2012 at 7:18 am

Hey there! I’ve been reading your website for some time now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to say keep up the excellent work!


annesofie November 16, 2012 at 8:53 am

Thank you for your feedback – We are glad to hear that you like our site.
See you on Tripwiremag :)

Best regards,


Suffolk Graphic Designer October 22, 2012 at 12:34 pm

A little cheese and a little usefulness :) Some good stuff here though. I like the background image ones, especially for tessellating patterns. Thanks!


Steven October 21, 2012 at 12:58 am

Brilliant list, I’ve been in desperate need for some of these tools, especially the background image makers, thanks very much


annesofie October 22, 2012 at 9:00 am

Hi Steve, glad we could help you find some new tools.

Best regards,


Chandan Chaurasia October 18, 2012 at 6:25 am

One of the most awesome web essentials I have ever stumbled upon. Some of them are familiar but thank you very much for the much greater insights and showcase of lots of generators. Bookmarked all of them. Thank you.


andrew September 19, 2012 at 7:36 pm

Thanks for the list, it great


Joey September 14, 2012 at 12:38 am

Wow!, great collection, keep it up!


annesofie September 14, 2012 at 12:08 pm

Thanks Joey, we always aim to please :)
Is there anything in particular you liked in the article?
Kind regards Sofie


Daclaud Lee September 6, 2012 at 2:39 am

I think I will bookmark some of these.


greg T August 24, 2012 at 2:13 am

How about QR Code generators


Corky Swanson August 23, 2012 at 6:20 am

Tremendous resources for designers and bloggers. Thanks, Dustin!


Zeidan July 26, 2012 at 2:39 pm

Nice post Dustin ! Wonderful list of online tools for designers! 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.


Linda July 26, 2012 at 2:35 pm

great! you save a lot of time for all of us. thank you


Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:

Web Analytics