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.

screenshot

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.

screenshot

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.

CSSing

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

Verdict

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.


Summary

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

9
  • http://blog.jesusyepes.com Jesus

    Seriously, 5$? there a hundreds of free online tools that do this and more….

    • http://liquid-drive.co.uk Joe Dawson

      That’s super cheap! I’ve been using this tool since they released the first Beta version and its IMO its worth more than it is.

      I also find it hard to believe that you could possibly find a tool online that would include a color picker tool and include ‘more’ when there really is nothing ‘more’ that could be included…

      Gradient has it all.

      Great app, time saver and well worth the money. Nice review.

      • http://www.grizzlescreates.com Cedric

        I used this app as well in beta and purchased it the day it came out of beta. I’ve already used it on two projects. Money well spent!

        As for a free option, ColorZilla is a wonderful option and offers browser plug-ins. I use it when I need a gradient with more than two colors (which is also mentioned in the review)… which I hope makes its way into Gradient (hint hint JumpZero). There’s also a little weirdness with selecting number in the code-slide-down-section but nothing I can’t live with.

  • God

    Dear Son, Father speaking, don’t be so stingy and pay those 5 bucks fon an excellent app.
    Best Regards
    God

  • Deseo Mar

    Uh, I just use Photoshop, or PixelMator, or GIMP, or [pick your free web-based app here]. this is a one-trick-pony app.

    • Armand

      It depends on your needs, I’m a Web Designer and thanks this app i’ve optimized my workflow. For 5$ (4€ for me…) this is great!

    • jon

      So Photoshop generates the css code for you?

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      Last I checked, Photoshop definitely doesn’t create CSS gradients… it would be awesome if it did though!

  • Tim
    • Armand

      IMHO a Web App cannot compete with a Native App. Menu Bar, click the icon, Work… isn’t it ?

      • Misnoul

        if it’s Cheap for me it’s cheap for everybody and hell Yeah a native app is way better than a web app especially in this case.

  • Passerby

    I’m so amazed by how people think $5 for something like this is such a negative thing. $5? Seriously???

    Granted, webapp is often functional and even useful yet its overall user experience most often sucks. I am totally willing to pay $5 for a desktop app like this. (In fact I just did and I’m very pleased.)

    Kudos to Mac developers for developing useful software.

    • Tim

      $5 is not a negative thing. That is an amazing price for such a useful tool. However, there are several free alternatives on the web that do the same thing for free. If you want to pay $5 for it, fine and good.
      Espresso has this feature built right into it. It’s all a matter of what you want to use.

  • Pingback: xhtml css templates – Gradient: Create Beautiful CSS Gradients | Mac.AppStorm | XHTML CSS - Style sheet and html programming tutorial and guides

  • Pingback: Win a Free Copy of Gradient: 5 Licenses Up for Grabs! | Mac.AppStorm

  • Pingback: Win a Free Copy of Gradient: 5 Licenses Up for Grabs! | Apple World

  • Pingback: Win a Free Copy of Gradient: 5 Licenses Up for Grabs! | Design City

  • untiground

    where’s multi stop ? cmon guys…

    http://www.colorzilla.com/gradient-editor/

    400% over of this app

  • Chris

    In the undying word of ABBA, “Gimme, Gimme, Gimme” …. a man after midnight…

    https://twitter.com/#!/ChDiL/status/147268326102544384

  • Chris

    lol wrong thread

  • timlou
  • Tim

    If you are going to pay for an app like this, you might as well spend just a little more and get this one, which does more than just gradients:
    http://itunes.apple.com/us/app/css3-toolkit/id479856901?mt=12

  • Pingback: Gradient css | Albfarweststor

  • http://dirsur.com.ar Dirsur

    That is an amazing price for such a useful tool. However, there are several free alternatives on the web that do the same thing for free. If you want to pay $5 for it, fine and good.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow