Gradient. The missing link between Web Designers and Colors

Buy for 3,99€ on the Mac App Store Gradient Icon Learn more about how it works
Prev
Screenshot

Straight from your designs

Choose your colors

Pick the perfect color from your mockups with Gradient's custom picker or use the standard color window to choose it.

If you have a value to match, type it in the input pane choosing either RGB, HEX or HSL and activate the alpha transparency by simply changing its value.

Screenshot

Directions and centers

Set the gradient

Once the colors are there, you only need to choose if you need a traditional linear or a fancier radial gradient with the switch.

You are then able to choose either the direction for the linear gradient or the position of the center for the radial in the even fancier radial-center-matrix™.

Screenshot

With detailed preferences

Custom output

Perfect the output on a per project basis (or each time before copying it) so you don't have to edit the generated code every time you paste it in your editor.

You can select which browser prefixes you want in, color fallbacks and output types, granting consistency in your web design projects.

Screenshot

As easy as copy-paste

Get the code

While it takes more to explain it than to actually do it, you're then ready to copy your code to clipboard and paste it straight in your favorite text editor or IDE.

There's a big Copy button for that, but if you're a keyboard-only type, try ⌘ + ⇧ + C. That should do the trick.

Next
Share Gradient on Twitter Facebook and spread the love

Trust the experts

Jeffrey Way

Jeffrey Way

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!

Chris Coyier

Chris Coyier

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.

Twitter Bird Dan Cederholm Was just playing around with the beta for http://gradientapp.com. Really well done Mac app for quickly creating CSS3 gradients.
Twitter Bird Andy Clarke I’ve tried gradientapp.com. It’s lovely to use.
Twitter Bird Veerle Pieters Just discovered Gradient App for OS X, by far the best gradient CSS3 creator that I've come across.

Our Plans

Warning Sign

These features will be included in future versions