I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. Note: click on the images to open the websites.<\/p>\n
<\/p>\n
CSS3 Generators<\/h2>\n
There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. It is a huge time-saver, and in all honesty I know three developers that wrote their own generators just because they wanted to help the community. So keep in mind it isn\u2019t like you are using something taboo made by AOL; these are very natural and organic generators that have come about as we have needed them. So why not share in some of the wealth? Let\u2019s go through a few of my favorite, and why you might enjoy them.<\/p>\n
<\/p>\n
General Generators<\/h3>\n
This section will focus on generators that take care of the broad spectrum needs and usages. These will cover almost everything you could need, or want in a generator, but by their very nature they may be worse at specifics. This is why I will be giving so many options later in this article for specific types.<\/p>\n
CSS3.me<\/strong><\/p>\n This is one of the exact generators I was just referring to. This one was created by one of my favorite designers, Eric Hoffman<\/a>, and it is amazing. Very simple, minimal, and stylish, but at the same time very functional. Giving you the ability to change and set the border radius, drop shadow, the gradient, and opacity \u2014 it is quite functional.<\/p>\n Note: Take a look at Eric\u2019s site; it is a great example of mobile first design. He is also a designer at Zendesk<\/a>, so send him some love if you\u2019ve ever enjoyed that product.<\/p>\n <\/p>\n CSS3 Maker<\/strong><\/p>\n Often times people will find generators that they love, and stick with them. And that is exactly what happened with a client I had worked with previously with regards to this generator. He was absolutely in love with it, and I can see why \u2014 it is surely functional. It may not be the most beautiful thing ever made but it does seem to have all the bells and whistles.<\/p>\n You can do @font-face work, animation work, box shadows, text shadows, text rotation, transitions, gradients, border radius, and a lot more. It is one that I usually have bookmarked, but rarely use simply because of how well the smaller generators do in each of their respective categories. But it is certainly a good generator to try if you need one and don\u2019t like to jump around to a bunch of different ones.<\/p>\n <\/p>\n CSS3 Generator<\/strong><\/p>\n This is another good general one that provides a lot of functionality. I like this one because it has nice and easy drop downs, and easy to use functionality. The design is also quite nice. It also offers a nice box size functionality. This one offers great ability to do the following: border radius, box shadow, text shadow, RGBA, multiple columns, box sizing, outline, transitions, transforms, selectors gradients. I think this is one of my favorites, because the design and UI is so clean. I usually use this one when I forget about cssmaker.<\/p>\n <\/p>\n CSS3-Tricks Button Maker<\/strong><\/p>\n One of the first button makers I saw back in the day really made me cringe. It was very linear, had no UI to it (ironically) and was overall a horribly designed product. As a side note, I will be talking about something similar next, but for now I will show one I found over at css3tricks<\/a>, and it is really a nice one.<\/p>\n One of the key points to reference here is the fact that it is almost entirely controllable by a drag and drop slider, which is really nice. Just wait till you have to enter everything manually using the keyboard and you will wish you had a nice dragging slider. As a final side note, CSS3 Tricks is a wonderful site with a ton of well organized and thoughtful content that you all would love to check out.<\/p>\n <\/p>\n CSS3 Button.net<\/strong><\/p>\n And now we come to the generator I was just referring to. The design may be lacking, but it offers a lot more choice than the previous one, which is ironically often how things work. Sometimes you\u2019d like ease of use and sometimes you need some serious choice when it comes to generators, and these last two really hit both of those points.<\/p>\n This one offers the ability to add multiple text shadows, inner-shadows, border, and font colors whereas the last one really didn\u2019t get into that much detail. It may be hard to figure out at first but you will get it if you just play with it for a few minutes. I find this one to be the most useful if you are used to Windows UI\u2019s, and as a result I\u2019ve had clients tell me this was their favorite because they\u2019ve been stuck on XP for years and don\u2019t know any better. And by now I\u2019m sure some of you are wondering, but it\u2019s honestly how it goes \u2014 some clients want links to generators to learn for themselves after you impress them. I usually link them to Lynda<\/a>, TeamTreehouse<\/a>, and a few of these generators for good measure.<\/p>\n <\/p>\n CSS3 Button Generator<\/strong><\/p>\n This is a really fun one. It gives you one big button to manipulate, that is in a rad retro color as well. You then can manipulate shadow, border, color, and on top of that it gives you the ability to edit the hover-over. I like this one because it is one that I found a while back when I was first getting into CSS, and it really gave me an idea of what it can do. The drag and drop sliders are great for people who are new to the languages, because you can see what you are able to do immediately. Now, I will say, I don\u2019t use this one particularly anymore \u2014 in light of other ones that have come about, but it is a great memory.<\/p>\n <\/p>\n Border-Image<\/strong><\/p>\n Nothing beats border-image.com when it comes to taking a specific image and then replicating it to find the right border style. Make sure you don\u2019t infringe copyright though, and use someone else\u2019s image without attribution.<\/p>\n But let\u2019s say you drew an arrow or triangle and you\u2019d like to find a generator to repeat it throughout your site\u2019s border or even an element\u2019s border. Well, nothing is better than this site when it comes to that need. You can manipulate the offset, the size, and the repeat that the image has.<\/p>\n As soon as you arrive on the site, you\u2019ll see an example image they have loaded in but it is really much more useful than that image has shown. I often will use it for designs in backgrounds that I want to repeat and\/or see how it would look real quick, before actually replicating the entirety of the background in Photoshop. You can use it for anything related to repeated images, really.<\/p>\n <\/p>\n Border-Radius<\/strong><\/p>\n This is a great and minimal little tool, that I often find is very practical. With it, all you do is simply set how much of a rounded edge you want on each corner. Very practical, very simple. And then you just check off what sort of browser prefix you want included, and boom done. It is a beautiful UI in all honesty. There should be tests in computer science courses where all you do is try to come up with something as simple and functional as this is.<\/p>\n <\/p>\n Color Zilla Gradient Editor<\/strong><\/p>\n This is billed as the ultimate CSS3 Gradient Editor, and for good right. In fact, it is so awesome that it is the only gradient editor that I will be including here. It has a ton of features, and is very usable and easy to get started with. Simply drag around the black and blue pencils a bit and you will quickly see what they do. They also make a browser editor in Chrome<\/a> or Firefox<\/a> that is really useful for designers working on the web. Also be sure to play around with the presets in this one, because often times those are good enough \u2014 whoever chose them did a great job.<\/p>\n <\/p>\n @fontface Generator<\/strong><\/p>\n This is a really interesting product. What it does is allows you to upload fonts that you have chosen from the web or may have on the computer, and then gives you an outputted file that is ready to work with on the web. You get more than one thing though, you get a few things. You get the CSS for @font-face properties given the font you chose, and an HTML file that displays the font and its many uses. It is really a great tool to go about checking out a font\u2019s full potential if you aren\u2019t quite sure about it, and especially<\/strong> if you don\u2019t have the time to generate an entire website with that font before making the decision.<\/p>\n <\/p>\n CSS3 Please<\/strong><\/p>\n This is a really fascinating product. Basically what it does is that it gives you a box set, and all the CSS for it, and then gives you the ability to turn the sections on and off to see what they do. So you can essentially reverse engineer the CSS3 to find out what it does, and then you can see what you are doing. \u00a0This is a great way to learn CSS3 if you are interested, but think that generators are a bit too complicated.<\/p>\n <\/p>\n Webestools Shadow Generator<\/strong><\/p>\n I like this shadow generator quite a lot, because it goes into detail and depth regarding drop-shadows that the other generators just don\u2019t. It may not look like the best designed product ever, but it is certainly awesome. It has inset shadows, outset shadows and the ability to manipulate offsets, set colors, and do pretty much anything you could do with code \u2013 but instead with a nice dragging bar. Oh how I love the dragging bar. Check this one out if you need to see generally what your shadow idea may look like before you hard-code it.<\/p>\n <\/p>\n HTML5 Generators are sort of hard to come by, and the reason for that is probably because of how great HTML5 Boilerplate<\/a> is. We won\u2019t be talking about that, because it isn\u2019t specifically a generator, so I will sum it up right here: It is basically an HTML5 template already filled out and ready for you to work with, so go check it out if you haven\u2019t seen it. It is pretty awesome actually. A lot of people use it as a starter template for their sites, and for good reason. Now back to generators. Finding a quality one is actually pretty difficult, but I have managed to find a few here that I will be showing \u2014 and then afterwards I have a few more generalized ones that touch on all the topics in this article.<\/p>\n Shikiryu HTML5 Generator<\/strong><\/p>\n Shikiryu\u2019s HTML5 Generator is a lot more complex. You can add in features that allow you to do things inside of Blueprint (mixins, etc), and fancy-type \u2014 so it is actually quite useful. I like it because it is a bit more semantic than the other options, and at the same time allows you to add in really popular third party applications that people love to use.<\/p>\n <\/p>\n Switch to HTML5 Generator<\/strong><\/p>\n This is an interesting generator. What it does is it allows you to generate a quick and easy framework for building sites, but unlike HTML5 Boilerplate, it lets us choose exactly<\/strong> what selectors we\u2019d prefer to see in our framework. I actually have tended to use this to generate code instead of HTML5 Boilerplate when I need a few more selectors or items than it offers. Now, it doesn\u2019t exactly follow all of the beautifully designed principles of semantic markup \u2014 like HTML5 Boilerplate does \u2014 but it does a good enough job, and you can go in and do the rest if you really need to use it.<\/p>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-7.07.26-PM.png\")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-7.37.08-PM.png\" "\\"Screen")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-9.20.51-PM.png\" "\\"Screen")
<\/a><\/div>\nButton Generators<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-7.27.53-PM.png\" "\\"Screen")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-7.32.09-PM1.png\" "\\"Screen")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-1.41.17-AM.png\" "\\"Screen")
<\/a><\/div>\nBorder Image & Radius Generators<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-24-at-7.41.49-PM.png\" "\\"Screen")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-5.26.43-PM.png\" "\\"Screen")
<\/a><\/div>\nCSS3 Gradient Generators<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-1.40.44-AM.png\" "\\"Screen")
<\/a><\/div>\nTypographic Generators\/Editors<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-1.41.37-AM.png\" "\\"Screen")
<\/a><\/div>\nReverse CSS3 Generator<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-1.41.01-AM.png\" "\\"Screen")
<\/a><\/div>\nCSS3 Drop Shadow Generators<\/h3>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-10.29.59-PM.png\" "\\"Screen")
<\/a><\/div>\nHTML5 Generators<\/h2>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-26-at-12.29.25-AM.png\" "\\"Screen")
<\/a><\/div>\n
![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-1.40.33-AM.png\" "\\"Screen")
<\/a><\/div>\n![\"\"](\"http:\/\/netdna.webdesignerdepot.com\/uploads\/2012\/04\/Screen-shot-2012-04-25-at-6.46.08-PM.png\" "\\"Screen")
<\/a><\/div>\n