45 Online Generators For Designers And Developers To Do The Job Faster!


With so many things to know and techniques to learn it often becomes hard for designers and developers to keep up with their projects and manage their work. While you could start every project by doing the same things again and again, the smart designers and developers know the importance of a well-developed workflow. One of the things that can accelerate and enhance your workflow are online generators.

Online generators can be extremely handy for creating small details or saving time writing code. Whether it’s a striped background, a pattern or an advanced CSS3 text effect, online generators can surely make your workflow go smoother. This post presents 45 of the best and latest online generators for designers and developers. The emphasis has been put on CSS3 generators since CSS3 is quickly becoming the new progressive web standard.

Backgrounds & Patterns

1. BGMaker


BGMaker allows you to create solid line patterns which are then exported as transparent PNGs. Don’t be fooled, however. If you checked out the gallery, you’d see the true power of this lite generator.

2. BGPatterns


BgPatterns is a tiny web app for making background patterns in a few clicks. It was created mostly for fun and experimentation by Sergii Iavorskyi.
Feedback is welcome.

3. PatternCooler


With PatternCooler you can add your own colors to 100s of cool free pattern designs, or browse from 10 000s of colored patterns using a seamless pattern background editor.

4. TartanMaker


Tartan Maker is a new trendsetting application for cool designers created by Alex ‘Pit’ La Rosa & Fabio Fidanza. You can easily create tartans with up to 10 bands and then export them as PNGs.

5. StripeGenerator


With Stripe Generator you can unleash your personal style, experiment and download the tile. You can use it directly in your CSS file or as pattern in Photoshop.

6. StripeMania


Stripemania is a simple and free web tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.

7. StripedBackgrounds


StripedBackgrounds generates a 5 column striped background with your chosen colors and resolution.

8. Dotter


Dotter allows you to easily create stylish dotted background with either one or two colors.

9. secretGeek’s GradientMaker


This gradient maker by secretGeek allows you to create horizontal or vertical gradient backgrounds with two colors.

10. ColourLovers Seamless Studio


Seamless Studio makes it easy to design a seamless pattern. With simple editing tools you can resize, rotate and add shapes, lines and text to the canvas and it tiles automatically. Save your pattern template and see how the world colors it in.

11. Background Generator


Background Generator provides the ability to edit the background of any website in real-time. It allows you to create fancy web 3.0 backgrounds without getting dirty with Photoshop and other image editing software. The project includes a collection of textures which are combined with custom linear-gradients and colors to create a wide assortment of themes.

12. Patternify


Patternify is an app that lets you create simple pixel patterns and export them either as PNG or as base64 code. The awesome part is that you can embed the base64 code straight in your CSS code! You don’t even need to use an image file anymore.

Color Palettes

1. Kuler


Kuler by Adobe is a web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler.

2. Color Palette Generator


With Color Palette Generator you can generate a color palette based on an image. You can upload your own image or choose from other user submitted ones.

3. Color Scheme Designer


Color Scheme Designer allows you to create various color schemes and export them as HTML/CSS, ACO for Photoshop and many more.

4. Copaso


COPASO from ColourLovers is an advanced color palette tool that helps you create the perfect color palette.

5. Pictaculous


Pictaculous helps you to decide which colors suit best with a particular image. Just upload an image and it will generate a color palette from it. You can also download Adobe Swatch File (ACO).

6. Colormunki


Colormunki allows you to generate color palettes from advanced color libraries, images and browse other user palettes.


1. RoundedCornr


With RoundedCornr you can generate HTML/CSS code and images for rounded corners. There are four options to choose from.

2. Tabs Generator


Tabs generator allows you to create tab styled buttons online without using any image editing software. Tweak size, colors, corners and more, generate your design, then download and use in your CSS style sheet.

3. Brilliant Button Maker


Brilliant Button Maker is a web interface to create 80×15 buttons. You can also use two images (one on the left and the other on the right side) to decorate the button.

4. Web 2.0 Badges


Web 2.0 Badges is a generator that creates cool web 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.

5. FreshGenerator


FreshGenerator is a web design tool which can create interesting graphic elements used in many web 2.0 sites. You may use it to create boxes of different styles and colors. In order to make changes to your image later, store the link listed below the image.

6. Favicon


Favicon is a tool that allows you to create favicons either by painting pixels manually or importing an image.

CSS3 Buttons

1. CSS3 Button Generator


With CSS3 Button Generator you can create modern and stylish web buttons that fits today’s web standards.

2. CSS3 Button Maker


CSS3 Button Maker allows you to easily create CSS3 buttons with gradients and shadows. Just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS.

3. CSS3 Button Generator


Generate fancy CSS3 buttons with just few clicks. This generator also provides you with the code for IE styles.

4. CSS Button Generator


CSS Button Generator will create beautiful CSS buttons for you to use on your web pages without the need for any images. When you have styled your button to your liking, simply click on the generated button to get your CSS style code.

5. CSS3 Button Generator


This CSS3 Button Generator is a HTML/CSS/JavaScript/Flash application that generates all of the style properties and speeds up the code writing for CSS3 buttons.

6. CSS Button Generator


With the CSS Button Generator you can instantly make buttons for your website or blog that use your colors, web fonts, and sizes. The CSS button generator uses no images and can say anything you want in any colors or size.

7. CSS3 Button Generator


Easy tool to generate CSS3 buttons with gradients and shadows.

CSS3 Generators

1. CSS3 Generator


CSS3 Generator allows you to play with multiple CSS3 properties to create backgrounds.

2. CSS3 Generator


Simple generator for creating simple single CSS3 properties.

3. CSS3 Please


CSS3, Please! is a Cross-Browser CSS3 rule generator. You can edit the underlined values in this CSS file and when done, copy the whole CSS code.

4. CSS3Warp


CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.

5. CSS3 Text Shadow Generator


CSS3 text shadow generator helps you insert beautiful shadow effects to your texts. You can change between different web fonts and explore different shadow effects such as Fire, 3D , acid and more stunning examples.

6. Ultimate CSS Gradient Generator


Ultimate CSS gradient generator is a powerful Photoshop like CSS gradient editor from ColorZilla.

7. CSS3 Gradient Generator


CSS3 Gradient Generator allows you to generate nifty CSS3 gradients with just a few clicks.

8. CSS3 Rounded Corner Generator


CSS3 Rounded Corners Generator generates the necessary CSS3 code to put rounded corners around your content. You can set different radius for the four corners, it is image free.

9. CSS3 Rounded Corner Generator


This generator will help you create the code necessary to use rounded corners (border-radius) on your webpages.

10. Border Radius


Easy tool for creating rounded corners.

11. Border Image Generator


This generator helps you to generate code for border radius properties.

12. CSS3 Multi-columns


Generator for creating multi-column CSS3 layouts.

13. CSS3 Pie


PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

14. CSS3 Sandbox


With CSS3 Sandbox you can explore CSS3 features and properties.



  1. Clad

    Nice post. Till now i struggled a lot with Photoshop to create artistic works and patterns for my applications. Finally i have seen your post. Big thanks for this post Keep up..

  2. Gavin

    I love this post!! Something I’ve really needed, bookmarked this for sure. I’ve been using the border radius website for a while but never knew most of the others were available!

    Excellent post guys, thank you!

  3. Catty

    I could just hug you….this is awesome!!! I’m really excited about the multi columns! Thanks!!!!! (=^_^=)

  4. Craig

    Wow man, this list is pretty sweet. I want to update my website and make it more professional looking but I do not want to pay for a developer/designer so I am trying to learn as much as possible. Some of these tools you mentioned should really help me out. Thanks

  5. Nathan

    CSS3 Generators list is great! Some new things to try. Thanks for sharing.

  6. Complete list. I knew some of these but there are many more tools out there ro help designer and developers. Besides for beginners they are great tools to help accomplish easy goals.