I am well overdue for a new HarmsSite post. So today I am going to talk about one of my favorite new tools. But first, an intro. Building out gradients is easy enough, get your start color and your end color and then plug them into all the various browser specific gradient css elements (webkit, moz, etc…) and you get a gradient. Like I said, simple enough but time consuming because each browser gets its own line.
Gradient App makes life much simpler. As a Gradient App user all I have to do use the color picker, or manually enter my colors, then just choose my gradient direction and any other options I would be interested in! Gradient App then gives me the CSS code to use, again, making my life much easier.
background-color: #69aece;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(105, 174, 206)), to(rgb(201, 97, 103)));
background-image: -webkit-linear-gradient(top, rgb(105, 174, 206), rgb(201, 97, 103));
background-image: -moz-linear-gradient(top, rgb(105, 174, 206), rgb(201, 97, 103));
background-image: -o-linear-gradient(top, rgb(105, 174, 206), rgb(201, 97, 103));
background-image: -ms-linear-gradient(top, rgb(105, 174, 206), rgb(201, 97, 103));
background-image: linear-gradient(top, rgb(105, 174, 206), rgb(201, 97, 103));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#69aece', EndColorStr='#c96167');
Obviously, looking at the above code, simple gradients are fairly straight forward. Remember to cover all your browsers (the filter is for Internet Explorer versions older than IE10 as they do not recognize gradients). Also obvious, making your own gradients can be a bit tedious, which is why I used Gradient App to make the code you see above.
Get Gradient App here: http://www.gradientapp.com/