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

Door globecom op zo, 2014-12-28 14:28

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.

Buttons

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.