Create CSS Gradients With Gradient App 2


Create CSS Gradients With Gradient App


One of the more modern features of new web browsers is the ability to build gradients into the CSS, the styling that contains all of the visual elements that make up a webpage. Previously these had to be done by a repeating picture, which would take up a certain amount of bandwidth and would be a pain to change if you want to do a slight alteration. Today’s app review is Gradient App, by JumpZero. Although there are a variety of CSS gradient tools out there, this app oozes Mac styling and simplicity and is a tool every web designer needs. It goes well with CSS Sprite App I have reviewed previously.

The Gradient Selection

Any good app should be usable straight out of the box, and you should be able to ‘flow’ and move through the app without having to read the instructions (although there is a cool start up screen that explains a lot). If you take a look at the image below, hopefully you should gain an understanding of how the app works.

Gradient app showing the various different functions. You move down the app, top to bottom.

From top to bottom you first you pick a colour, select the type of gradient you want to use and then output the CSS code ready to be used in your website CSS sheet.

Picking A Colour

Picking the colour you want to use is very important in a design. The two colour swatches at the top of the screen define the two colours used in creating your gradient. Clicking on the large coloured circles brings up the built in Apple colour picker.

The colour pickers and swatches.

However, one of the coolest features of this app is a system wide picker, show in the image below. This magnified Loupe, zooms in to the pixel level and shows you each pixels colour. Then when you have found the exact shade you want, you can click on the pixel and it will load the colour into the swatch. You can then repeat the process for the second colour swatch. Great if you have an existing design or image you want to pull a colour from.

The app also supports different colour numbering systems such as RGB, hexadecimal or HSL, as well as alpha transparency. So you can pick the colour you want in the format you are used to, I for one like the hex system, as the codes are shorter and easier to remember when moving between style sheets.

What Type Of Gradient?

Once you have picked your colours you can now develop the type of gradient and styling for the gradient in question. There is a choice of liner or a radial gradient and the options associated with the gradient, with the different types being accessible by a little switch.

The graident selection tool, this showing a radial gradient from the centre.

The image shows a radial gradient in the centre, although the centre point can be moved around by using the options above the preview circle. If, like me, you always get gradients mixed up, you can either switch the colours in the swatches by using a handy button or the extensive keyboard shortcuts.

The linear gradients allow you to pick the direction, either vertical, horizontal or from a corner.

The Output

The final part of the app is to render and output the CSS code so you can use it in your style sheet. You can either use the big ‘Copy’ button to directly output it to your clipboard to paste in the CSS file. The small ‘CSS” button shows you the output in a very pleasing text format so you can have a quick look.

A preview of the CSS code used to create a web gradient.

The app has built in settings for Firefox, Safari, Chrome, Opera, Internet Explorer, and the W3 standard. These are all configurable, so you can switch them on or off as needed. The app can also set a backup default colour to either the left or right swatch. This is very useful if your site is visited by a browser that doesn’t support gradients, although all modern browsers do.


I really like this app. Although I don’t do a lot of web development I can see it being very useful for developers. This app does cost, €4.99, which is more expensive than some of the free web based gradient builders, but none compare to the styling or Mac feel this app employs.

One improvement I would like to see in future versions is the ability to switch the app to a horizontal format. This would allow me to squeeze it in around some of the other apps I would have open. However, this is just a minor concern that really doesn’t detract from the overall usefulness of the app.

If you have any comments on this app, please leave one below. If you want to learn more about CSS, Amazon has a great book that you should go out and read. Meanwhile you can find this app on the app store.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips