
CSS3 Generators
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’t 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’s go through a few of my favorite, and why you might enjoy them.General Generators
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. CSS3.me This is one of the exact generators I was just referring to. This one was created by one of my favorite designers, Eric Hoffman, 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 — it is quite functional. Note: Take a look at Eric’s site; it is a great example of mobile first design. He is also a designer at Zendesk, so send him some love if you’ve ever enjoyed that product.


Button Generators
CSS3-Tricks Button Maker 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, and it is really a nice one.


Border Image & Radius Generators
Border-Image 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’t infringe copyright though, and use someone else's image without attribution. But let’s say you drew an arrow or triangle and you’d like to find a generator to repeat it throughout your site’s border or even an element’s 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.

CSS3 Gradient Generators
Color Zilla Gradient Editor 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 or Firefox 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 — whoever chose them did a great job.
Typographic Generators/Editors
@fontface Generator 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's full potential if you aren't quite sure about it, and especially if you don't have the time to generate an entire website with that font before making the decision.
Reverse CSS3 Generator
CSS3 Please 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. This is a great way to learn CSS3 if you are interested, but think that generators are a bit too complicated.
CSS3 Drop Shadow Generators
Webestools Shadow Generator I like this shadow generator quite a lot, because it goes into detail and depth regarding drop-shadows that the other generators just don't. 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 - 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.
HTML5 Generators
HTML5 Generators are sort of hard to come by, and the reason for that is probably because of how great HTML5 Boilerplate is. We won't be talking about that, because it isn't 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't 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 — and then afterwards I have a few more generalized ones that touch on all the topics in this article. Shikiryu HTML5 Generator Shikiryu's 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 — 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.


Dain Miller
Dain Miller is a former Presidential Innovation Fellow at The White House, and mentor for developers at starthere.fm. He now works to lead engineering teams at a distributed media company. You can find him on Twitter @dainmiller or at his website
Read Next
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…
30 Obsolete Technologies that will Perplex Post-2000s Kids
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…