Personal, design, inspiration, interests.

18 CSS3 Generators For Quicker UI Styling

All the fancy effects you see on the web are no longer done with background images and archaic techniques. CSS3 is starting to be supported in every possible browser, mobile devices and even IE 7+ if you know how to do some tricks. The effects used in these generators range from gradient generators to easy shadows, text styling and border radius. CSS is a tough language, so why not relying on a time-saving tool for beginners or rushed developers who have no time to remember that using negative values on the borders can lead to an arrow. Check out the following sites and use them to create even more amazing sites, but be careful, bloating your CSS files will slow down your page loading time, don’t abuse, recycle, use SASS and stay cool. To open the site click on its title or correspondent image, bookmark if you want, comment if I helped you out.

A neat looking CSS3 toolbox for web designers, you have four options to choose from: Gradient editor, border radius, noise background generator and a box shadow editor. It works pretty well and has useful scrollbars.

If you were looking for a really visual and simple tool to only generate border radius to your DIVs, this is the tool for you. Once you give a corner the value you want, the rest will take the same value; of course, you can individually change them afterwards, the generated CSS will appear in the center of the box for you to copy. The plus I liked is that you can select and deselect the prefixes you want (gecko for -moz- and the rest are self-explanatory).

A rather simple yet resourceful button maker, made by CSS-Tricks, a cool site by Chris Coyer. I don’t like the fact that you can’t change the shadows, but I think you won’t have any problem with that. The three scrollbars are for the button, text and border radius sizes.

I hadn’t learned how to make box arrows with CSS border tricks until now, but you may agree with me that this little web app will save us the brain wreck that involves using negative values and pseudo-classes. It’s possible to change the direction of the arrow, its border (0 is a valid value) and the colour of it.

More properties are needed, Create CSS3 has transformation controllers for the more advanced developers and ambitious web designers. Even if it doesn’t have scrollbars, you still know the exact units you need, right?

I swear, this site has been around for years and it never gets old, it might not be your typical generator but can be used to play around with the code until you get the results you want. The values are editable, you’ll see the live update on the box located at the top-right corner of the screen.

Gradients are a huge part of the modern web designer, I remember when we were used to do this with heavy background images… not anymore, CSS3 has been around a long time and it’s time to start exploiting its full potential.

One of the most famous and most used generators on the web, has many options including font-face and transitions. The good point about this generator is that you get to know what browsers support the styles you want to apply.

It’s in French, in case you did not notice at first. Pretty easy way to use in large texts, articles and blogs. No matter how you use it, the site is very easy to use despite of the language barrier (not for me, hehe).

Border images were a huge pain in the butt, not now, choose from various images in your gallery and tweak your settings to get the desired results. But remember not to be cheesy and cheap, make something professional.

This will generate a self-repeated image link once you finish your pattern, with the size being scalable. There are plenty of tools, the necessary to create something decent. Although nothing beats a more complete software.

The difference between this and the rest, is that you can generate multiple boxes to play around, this might be useful to compare results, but the options are the same as the previously mentioned sites.

If you don’t know what sprites are, make sure to search for the article here (in case there’s no article, wait for it or Google about it). This is a resource I use a lot because I believe using sprites is an incredible boost in performance and page load time; sometimes I find myself dealing with repetitive background positions and class names, but this app that works ON FIREFOX (the grayed buttons and log-in link don’t work on Chrome) will save you a lot of time. Canvas is re-sizable and they even have functions to adapt the size to the existing icons.

Conclusion

If I missed one, please let me know. I could not find animation generators, but I will surely make some buzz regarding CSS3 animations when the time comes, just stay tuned. These sites are a must-bookmark for every web developer who is starting or needs some serious time saving.

Hot clicks

Contact me

The person running this blog is, oh surprise! Not a robot! What does this mean? It means that you can send me anything via e-mail to let me know any complain you have, suggestion, legal issues, feedback, proposals or whatever you have in mind. Make sure to review the "about" section before sending anything. If you agree, proceed.