1. Computing

Discuss in my forum

CSS Generators

7 Great Online Tools to Help You Build CSS

By

CSS can be challenging to do, but luckily there are a lot of tools, both online and desktop software, that you can use to help you build your CSS. The most common of these are the online CSS generators. Here is a list of some of my favorite CSS generators along with what they do and how they can be used.

CSS3 Generator

CSS3 Generator
Screen shot by J Kyrnin courtesy CSS3 Generator

This CSS generator by Randy Jensen is one I use all the time for quick CSS3 features. It can build rounded corners (border-radius), text and box shadows, RGBa colors, @font-face fonts, multiple columns, box sizing and resizing, outlines, transitions, and transformations. It also has help for learning CSS3 selectors and a link to the following CSS generator for creating gradients. This is one of the best CSS3 generators online right now. If you bookmark just one generator, it should be this one.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator
Screen shot by J Kyrnin courtesy Ultimate CSS Gradient Generator

If you’ve ever built a gradient in a graphics program, then this online gradient editor CSS generator will be familiar. There are a bunch of presets, and you can save your own once you’ve created one. You can choose what format you want the colors in (hex, RGB, HSL, and more), whether you want comments in the code, and even if you need Internet Explorer 9 support (using SVG). You can build linear, radial, and diagonal gradients with multiple stop points. Once you’ve got the gradient you want you just copy it to the clipboard and paste it into your HTML (with a few modifications for IE9 support).

CSS Layout Generator

CSS Layout Generator
Screen shot by J Kyrnin courtesy CSS Layout Generator

This CSS generator helps you build your CSS layouts. It creates the HTML and CSS for you all you need to do is download the respective files. You can create HTML5 documents using sectioning elements or DIV. The only drawback is that you are limited to a layout with no more than 3 columns and header and footer rows surrounding the main columns. You will have to build fancier designs yourself. I also found the color picker somewhat difficult to use. But if you’re having trouble building basic CSS layouts, this CSS generator can help.

The Box Office

The Box Office
Screen shot by J Kyrnin courtesy The Box Office

One frustrating part of web design is that everything is square and boxy. Designers use images with transparent backgrounds to create a more fluid         feel, but it can be hard to do things like in magazines such as wrap text around the contours of an image. This CSS generator helps you do that. You give them a URL of an image, drag the text blocks to wrap around it and then generate your HTML and CSS.

CSS Sprite Generator

CSS Sprite Generator
Screen shot by J Kyrnin courtesy CSS Sprite Generator

CSS sprites are a great way to speed up your web pages because they put all your icons and images into one file, thus reducing the requests on the server. But they can take a long time to build and even longer to create the CSS for. But with this generator you upload an image and choose what you want the rollover state to do. The generator builds the sprite for you and gives you the CSS you need to use it. You can also upload a file that already has all the image states, and define just the relevant areas.

@Font-Face Generator

@Font-Face Generator
Screen shot by J Kyrnin courtesy @Font-Face Generator

I love the Font Squirrel site, and one of the best parts is the @font-face generator. You simply add the fonts you want to in your @font-face and download the kit to your hard drive. The kit includes the CSS and HTML you need to add that custom font to your site.

Clear CSS Generator

Clear CSS Generator
Screen shot by J Kyrnin courtesy Clear CSS Generator

This is a fairly simple generator that helps you do some of the more basic parts of CSS quickly. You can change the background color, the text and link colors, change the font family between two options, set the font size, an adjust the margins. It also lets you choose what measure to use for font size and margins, but it defaults to pixels rather than something more accessible like ems.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS Generators

©2014 About.com. All rights reserved.