Gradients are (mostly) created with the background-image CSS property.
Online Tools
ColorZilla CSS Gradient Generator
CSSMatic CSS Gradient Generator
SASS Mixins
If you are using SASS you can use these mixins:
@mixin gradient_linear(
$startColor, // HEX color value (#FFFFFF): The start color for the gradient.
$endColor, // HEX color value (#000000): The end color for the gradient.
$direction: 'horizontal', // string:
// horizontal: The gradient will flow from left to right (default value).
// vertical: The gradient will flow from top to bottom.
// diagonalTop: The gradient will flow from top-left to bottom-right.
// diagonalBottom: The gradient will flow from bottom-left to top-right.
$startPos: 0%, // percent: The start point of the gradient.
$endPos: 100%, // percent: The end point of the gradient.
$supportLevel: 0 // integer:
// 0: Everything accept Old IE (default value).
// 1: Only modern browsers (smaller code output).
// 2: Everything including old IE 6-9 browser support using 'filter'
// hacks which add performance degradation.
)
{
$directionB: '';
$directionA: '';
$directionC: '';
@if $direction == 'vertical'
{
$gradientType: 1; // For IE filters.
$directionA: 'top';
$directionB: 'left top, left bottom';
$directionC: 'to bottom';
}
@else if $direction == 'diagonalTop'
{
$gradientType: 1; // For IE filters, fallback to virticle gradient.
$directionA: '-45deg';
$directionB: 'left top, right bottom';
$directionC: '135deg';
}
@else if $direction == 'diagonalBottom'
{
$gradientType: 1; // For IE filters, fallback to virticle gradient.
$directionA: '45deg';
$directionB: 'left bottom, right top';
$directionC: '45deg';
}
@else // default to horizontal.
{
$gradientType: 0; // For IE filters.
$directionA: 'left';
$directionB: 'left top, right top';
$directionC: 'to right';
}
@if $supportLevel == 0 or $supportLevel == 2
{
// Fallback for crazy-old browsers.
background-image: $startColor;
// Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0
background-image: -webkit-gradient( linear, unquote($directionB), color-stop( $startPos, $startColor ), color-stop( $endPos, $endColor ) );
// Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3
background-image: -webkit-linear-gradient( unquote($directionA), $startColor $startPos, $endColor $endPos );
// Firefox 3.6 - 15
background-image: -moz-linear-gradient( unquote($directionA), $startColor $startPos, $endColor $endPos );
// Opera 11.1 - 12
background-image: -o-linear-gradient( unquote($directionA), $startColor $startPos, $endColor $endPos );
// IE10+
background: -ms-linear-gradient( unquote($directionA), $startColor $startPos, $endColor $endPos );
}
// Only the fastest survive:
@if $supportLevel == 0 or $supportLevel == 1 or $supportLevel == 2
{
// Opera 15+, Chrome 25+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+
background-image: linear-gradient( unquote($directionC), $startColor, $endColor );
}
// If you need old IE (6-9) support:
@if $supportLevel == 2
{
// "Invalid", but works in IE 6-8
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=$gradientType, startColorstr=$startColor, endColorstr=$endColor
);
// Valid, works in IE 8-9
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=$gradientType, startColorstr=$startColor, endColorstr=$endColor
);
}
}
IE 6-9 Compatibility
Filters for IE
Filters only work with HEX color values. Alpha transparency can still be used by prefacing the hex value with the amount of transparency in hex, from 00 (0%) to FF (100%). Example:
rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A