1. Home
  2. Mac OS X

Pick Colors To Form A Gradient And Get CSS 3 Code With Gradient [Mac]

Defining CSS 3 class for color gradient is a wearisome task, as one needs to find the required color shades and then mix them together to form a gradient. When the gradient is created, transforming it to CSS3 code (to call it in HTML5) isn’t easy at all; web designers often struggle finding the exact HEX values of different color shades to finally create a CSS class for color gradient. Gradient is a small, elegant application for Mac which lets you pick colors to form a gradient, change gradient shapes, and generate CSS3 code for final version of gradient which you want to use in your website stylesheet document. The application comes with RGB and HEX color code editors to manually adjust the color shades of gradient. Two small color pickers have also been integrated into the application to pick colors off the screen for each gradient color shade.

Pick the color from the screen which you want to include in gradient, click the magnifying glass button to launch the color picker, and move the cursor around to view color shades. A click will save the color shade underneath the current mouse pointer location to the application. Similarly, you can choose other color shade of the gradient. A small color swap button is available to switch between current gradient colors. By default, the RGB and HEX color code editor is invisible. However, you can reveal it by down-arrow button. It shows the RGB and HEX color values for both color shades of gradient.

gradient main 2

Apart from color picker, you can manually change the gradient colors using Mac native color palette. Underneath the RGB and HEX color code editors, you will a find a switch button to choose the required gradient style and angle. By default, it shows 4 angles. When you click the switch button, it reveals different gradient styles.


Gradient supports all widely used web browsers, including Firefox, Opera, Chrome, and Internet Explorer. From Settings, you can change the Fallback Color and change the output mode.


Once done, you can view gradient CSS code by clicking CSS button. However, if you want to directly copy the CSS code, click Copy to paste the code in your CSS file or application development IDE.


All in all, Gradient provides you with quick tools for designing and embedding gradient CSS code in your graphic design project. It works on Mac 10.6 or higher.

Download Gradient

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.