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.

CSSmatic

cssmatic

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.

CSS Border Radius Generator

bradiusite

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).

CSS-Tricks’ Button Maker

csstricks

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.

CSS Arrow Please!

cssarrowplease

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.

Grad3 CSS3 UI Processor

grad3

From Japan to the world, one of the best (if not the best) CSS3 button generators out there. Skeumorphism will never die and if you choose not to have flat buttons, let’s use some gradients, damn it!

Create CSS3

createcss3

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?

CSS3 Please!

css3please

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.

3D CSS Text

3dcsstext

Not much to say about this, just your usual text shadow with more options that the rest.

CSS Gradient Generator

css3gradient

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.

Layer Style

layerstyle

Yeah I know, looks exactly like the Photoshop layer style panel. That’s the intention! I love it to death because it feels more interactive than the rest, a solid interface and very easy to use.

CSS3 Generator

css3gen

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.

CSS3 Pascal Seven

css3pascal

Same but with a more friendly and good looking User Interface, the box will suffer the effects you choose, options are visual. The generated code can be modified to avoid comments and such.

Dji – Multi-Column Text Generator

csscolumns

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 Image Generator

borderimage

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.

Patternify

patternify

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.

CSS 3.0 Maker

css30maker

CSS3 Generator and Playground

css3playgound

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.

SpritePad Sprite Generator

spritepad

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.

Advertisements

14 thoughts on “18 CSS3 Generators For Quicker UI Styling

Ask, comment, or give feedback :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s