Gradient: Create Beautiful CSS Gradients

With the multiple common web browsers these days, designing websites that work on all of them can be a strain, especially when they each read CSS in different ways. Even if you’re not someone who creates websites, you’ve no-doubt heard the complaints of many a web coder about the different formats for the multiple web browsers.

JumpZero pounced on the opportunity to create what they call “the missing link between web designers and colors,” and at a launch sale of just $4.99, I think they may just have found it. Head past the break to get an in-depth look at Gradient.

The Basics

When you first set eyes upon the app you’ll immediately notice its simplicity. Just one small window, with a few options. The app, as you would expect, has one main purpose – creating gradients for web browsers; and it has three core functionalities to make them: selecting the two colors, setting the gradient appears, and creating it in CSS.


The one and only screen

Getting The Colors

There are multiple ways of selecting your colors. Clicking on either of the colors in the top section will bring up a color wheel where you can very accurately select your color of choice. Among the choices are the option for Color Sliders, Palettes and even Crayons – all giving you a multitude of ways to get the desired color.

Choosing your colour - spoilt for choice

There are more ways as well; the system-wide color picker can be used for precise selections. This is really useful especially if you see a color and want to be able to recreate it, and it will work on anything on your screen whether its a video or a computer game.

The system-wide colour picker extremely useful

And yes, even more ways. If you really know your colors, or happen to have a certain color memorized, you can enter it via its RGB, HEX or HSL code in the slide-down section. This could be fantastically helpful and make color selection significantly quicker, as well as being able to edit the color very slightly each time.


RGB, HEX and HSL Editing

Setting The Gradient

Once you’ve gone about selecting your two perfect colors, you want to accomplish what you purchased this app for – getting a great looking gradient. You have two options at first, indicated by the slider about one-third of the way down the app, either a linear gradient or a radial gradient.

Linear (left and radial (right) options for your gradients

By choosing “linear” you must then settle on one of four directions; down, right, diagonally down and diagonally up (you may wonder why it there isn’t a left or up etc, but that is because at the top you can easily swap the two colors around, eliminating the need for a left and up). If you select a radial gradient then you have a few more choices as to where you want the gradient to centre. You have nine different options, providing lots of variations for your designs.


You’ve chosen your colors and set your the gradient, and you’re just rearing to start implementing it on your site; all that’s left to do is grab the CSS and go. First however, you have the option to customize the CSS output by selecting which browsers you wish to support, color fallbacks and the output type.

Code preferences

Clicking on the “CSS” button will give you a live preview of your code at any time in a popover, and when you’re happy with what you’ve got just click ‘Copy’ (or ⌘ + ⇧ + C) to copy the code into your clipboard and ready to paste into your favorite editor.

Previewing your code


Overall this app is excellent at what it’s main purpose is; creating awesome gradients. It’s light-weight and incredibly simple to use, while also packing a bunch of great features such as a universal color grabber and the ability for multiple different gradients.

A nice update would be the ability to create all kinds of custom gradients and not be limited to only nine radial directions, as well as more color stops to create even more interesting gradients. However, I’ve spoken with the developer and I’m certain we’ll see plenty of great updates in the future. In all, the design is simple and elegant, the app runs very fast with smooth animations, resulting in a very pleasant user experience and great end results.


A great light-weight app for creating beautiful gradients in CSS