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
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.
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.
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.
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.
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.
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.
StripedBackgrounds generates a 5 column striped background with your chosen colors and resolution.
Dotter allows you to easily create stylish dotted background with either one or two colors.
This gradient maker by secretGeek allows you to create horizontal or vertical gradient backgrounds with two colors.
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.
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.
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.
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.
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.
Color Scheme Designer allows you to create various color schemes and export them as HTML/CSS, ACO for Photoshop and many more.
COPASO from ColourLovers is an advanced color palette tool that helps you create the perfect color palette.
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).
Colormunki allows you to generate color palettes from advanced color libraries, images and browse other user palettes.
With RoundedCornr you can generate HTML/CSS code and images for rounded corners. There are four options to choose from.
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.
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.
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.
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.
Favicon is a tool that allows you to create favicons either by painting pixels manually or importing an image.
With CSS3 Button Generator you can create modern and stylish web buttons that fits today’s web standards.
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.
Generate fancy CSS3 buttons with just few clicks. This generator also provides you with the code for IE styles.
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.
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.
Easy tool to generate CSS3 buttons with gradients and shadows.
CSS3 Generator allows you to play with multiple CSS3 properties to create backgrounds.
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.
CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.
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.
Ultimate CSS gradient generator is a powerful Photoshop like CSS gradient editor from ColorZilla.
CSS3 Gradient Generator allows you to generate nifty CSS3 gradients with just a few clicks.
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.
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.
This generator helps you to generate code for border radius properties.
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.