Mac App Store

Mac App Store

Mac App Store is the simplest way to find and download apps for your Mac.

To download Gradient from the Mac App Store, you need a Mac with OS X 10.6.6 or later. Learn More.


By Jumpzero

Open the Mac App Store to buy and download apps.


Gradient streamlines the creation of CSS3 Gradients.

It is a simple yet powerful tool to help you get rid of the clumsiness of ALL vendor prefixes.

• Pick the perfect color with Gradient's custom picker (or use the standard Colors window)
• Adjust the value in RGB, HEX or HSL in the input pane
• Use shortcuts to speed up your workflow and make CSS gradient creation as fast as it possibly can be
• Choose between linear and radial gradients
• Set the direction for linear gradients or the center position for radial ones
• Fine tune the output to perfectly suit your needs and your coding style
• Choose between CSS ans SCSS (or Compass) output

And more time-saving features are already in the works, like:

★ Multi-step Gradients
★ More positioning options

Trust the experts:

"You won't find a web designer alive who doesn't cringe at the process of creating CSS3 gradients for the various modern browsers and Internet Explorer. It's incredibly tedious, but, thanks to Gradient, this task now takes seconds!" Jeffrey Way, NetTuts+

"Writing out gradients by hand with all the appropriate vendor prefixes is tedious, error prone, and a waste of time. For simple two color gradients (the majority of use cases) Gradient App is the perfect tool." Chris Coyier, CSS-Tricks

What's New in Version 1.1

★★★ SASS Support! ★★★

We finally added this new long-awaited output mode and you can choose it now from the Preferences pane.

Mind you, we're not talking about Compass only. It's the real deal:

• SCSS with our own custom mixin you can copy and use
• Compass optimized output


we know you're also still waiting for multi-step Gradients. Let's be clear: we promised, you'll have them.


Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4

Customer Reviews

If you deal with CSS gradients… buy this app

Really pleasantly designed application and so easy to use. When you first start it, there's a description of how to use the controls but this application is so intuative to use that you can dismiss that initial help screen and get on with creating gradients.

I hate having to figure out the proper syntax for webkit, firefox, opera and internet explorer each time I want to create a gradient. This application takes that pain away and allows me to concentrate on the design process rather than the technical coding of the css.

Alpha stops would be a nice addition and then five stars...

Brilliant job guys!


I've used an assortment of web sites to figure all of this out. It's well worth $4.99 to have a native app that can do it instead. Gradient takes a prominent position on my Dock between Photoshop and all my text editors. Nice app!

I guess it would be nice to have the ability to set different stops, but 95% of the time gradients are just a smooth transition from one color to another, so it's no big deal. Wow, remember having to repeat-x images across an element to get this effect—or worse using a big gradient image as a table cell background.

Super Useful App

These kind of generators are a dime-a-dozen, but Gradient integrates so well and is so speedy to use that it's a no-brainer. Especially useful is the IE gradient filter and average color generation -- For the work I do, a large chunk of the demographic uses older browsers so they're no longer left out and I don't have to worry about those lofty filters and fallbacks. One feature that would make this great app even better is the addition of color/alpha stops (Currently it's just start/end)

View in Mac App Store
  • $4.99
  • Category: Graphics & Design
  • Updated: Jun 05, 2012
  • Version: 1.1
  • Size: 1.4 MB
  • Language: English
  • Seller: Nicola Armellini

Compatibility: OS X 10.6 or later, 64-bit processor

Customer Ratings

Current Version:
All Versions: