Something I use every day —


18 January 2014

Gradient Working with CSS3 gradients can be a pain. From remembering the correct format for each browser, to getting just the right order of declarations (for the few cases it matter, let alone remember which ones those are), there is a lot that can go wrong, and time spent figuring out which line is out of place is a waste (in the best case), or billable time (in the worst).

Enter Gradient

Gradient is a menubar app, designed to remove all of the tedium and stress associated with CSS3 gradients. It features two color pickers, each of which allow you to select one end of the gradient you’re creating (it also gives you the ability to enter the color value yourself, with support for RGB(A), HEX, and HSL). The selections can easily be inverted or adjusted, and the style of gradient, either linear (top to bottom, left to right, or diagonal) or radial, with a nine-position grid of starting points. Pressing the “copy” button copies the necessary code to clipboard, ready to be dropped into your stylesheet. It can output code for CSS, Sass, and Compass, and allows you to select which browsers to support.

While I’m generally against using any tool that writes code for you, single-purpose apps like Gradient are hard to argue against. The code it outputs are short, perfectly formatted snippets, with all the lines needed for every browser I care to support, and then some. While I would like the addition of a few more features (for instance, the ability to easily define the transition of the gradient), Gradient still does a wonderful job of getting you on the right path for any CSS3 gradient you need.

Gradient is $4.99 on the Mac App Store.

This post is the second in a series where I discuss a few of the tools I couldn't work without.

  Design, Work, Code, everyday