There are some nice and useful css generators around the web that I think every web designer should use. Why should you use css generators? It’s simple, they speed up your work flow, bu providing you written code that you just need to copy and paste into your project.
And if you want to customize it, you can. It saves a lot of time. In this article I’ll cover some of the CSS Generators that I have been using for quite a while now.
1. ThemeShock’s CSS3 Drop Shadow Generator
Theme Shocks Drop Shadow CSS Generator is very easy to use, and it can generate 8 types of shadows, and it’s cross browser compatible.
- Default
- Bottom
- Sides
- Top & Bottom
- Bottom Left
- Bottom RightTop
- Right & Bottom Left
- Top Left & Bottom Right
2. ThemeShock’s CSS3Text Shadow Generator
An other great and easy to use tool from themeShock. This time it’s a Text Shadow CSS Generator. Supports multiple custom fonts, 12 types of shadow, and gives you link to the custom font as well in the generated code.
3. Css Button Generator
CSSButtonGenerator.com is a CSS Generator for buttons. It has many options to choose from, color shames, gradient background, solid background and it even generates the HTML and the class for the button. And of course it’s Cross Browser Compatible.
And they also have a Google Chrome app which you can download as well.
4. ColorZilla’s Ultimate CSS Gradient Generator
ColorZilla’s Ultimate Gradient CSS Generator is an other great tool. It has some pre-made gradient but you can create you own. It works just like in Photoshop. You choose the colors etc and it Generates the CSS Code for you. And it’s also cross browser compatible.
5. HTML Table Style Generator by eli geske
Eli Geske’s Table HTML and CSS Generator, is once again an other easy and use full tool. You have a lot of options to choose from and edit your table’s design. Or you can choose one of the pre made designs they provide. The generator provides you an HTML structure and the Cross Browser Compatible CSS code.
6. CSS3 3D CUBE GENERATOR
CSS3 Cube Generator enables you to create complex box-shadow, layered, gradient 3D shapes with ease. Simply copy and paste the code from the ‘textarea’s above to include in your own site’s CSS, and HTML files respectively. Creating layered shadows is a cool way to create 3D CSS effects, and generating is essential, as it is really tedious to manually type out 50 lines that are each different.
7. CSS Box Shadow Generator
CSS Box Shadow Generator provides 8 styles of box shadows that are 100% customizable. When generated, it presents the preview, the HTML code and the CSS, all ready to be copied.
8. Visual CSS Gradient Generator
CSS + SVG + Canvas cross-browser gradient generator for web designers
9. 3D CSS Text
The 3D CSS text generator uses the sensational power of text-shadow to create thrilling
text and icons that almost reach out and grab you through the magic of The 3rd Dimension!
10. HSL Color Picker
My favorite color picker, most of the time I use the chrome inspector for picking colors, but this one is nice for fine tuning a color selection and also gives you a good sense for how HSL color works.
11. Gradientoo
Gradientoo is an easy to use CSS Gradient Generator, It uses 2 colors to create the gradient which you can choose from a nice color picker. The tool supports both linear and radial gradients.
12. CSS3 Factory – CSS3 Gradient Generator
CSS3 Factory Gradient Generator by CSS3 Factory. It’s easy to use, with a simple UI. The tool can generate the CSS code with RBG or HEX Colors. And the CSS code is cross browser compatible.
13. CSS3 Maker
CSS3 Maker is an other great css generator tool. You can easily create cross browser css animations, gradients, Transforms, transitions, Text and Box Shadow, rotate text and Fontface codes.
14. AngryTools.com
Angrytools is a set of useful css generators; including Border, border radius, box/text shadow, background, transform, transition and gradient.
15. ManyTools.org
Manytools aims to help designers and developers like you and me to speed up their workflow by creating helpful generators, like css generators, html generators and much more.
16. Layerstyles
Layerstyles is like Photoshop’s layerstyles, but in your browser, and it creates CSS
17. CSS3 Generator
CSS3 Generator a pretty nice tool that can generate code for border radius, box shadow, box sizing, outlines, flexbox and much more.
18. CSS3 Playground
CSS3 Playground supports a range of CSS3 properties and it allows you to preview effects on more than one element and change the content of the boxes.
19. CSS3 Button Generator
The CSS3 Button Generator allows you to tweak the font, padding, border, background gradient, inner shadow, drop shadow and text shadows using up/down controls which can be easier and more logical than sliders.
20. CSS3 Gradient Generator
CSS3 Gradient Generator allows you to create linear gradients by adding colors at any number of stop points. The old webkit syntax is produced as well as Mozilla code which should be compatible with other browsers
I hope this list of css generators helps you to speed up your workflow. Also, a huge shoutout to @gradientoo for helping me collect some of these amazing generators.
Note that this list is updated from time to time. Check back later, may I’ll find some more usefull CSS Generators.