Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS3 Linear Gradient

CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on.

Syntax

linear-gradient( [ [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )  

background: linear-gradient(top, black 0%, white 100%);  
-moz-linear-gradient(<point> || <angle>, color-stops) /*Firefox Linear gradients*/
-webkit-gradient(linear, <point>, color-stops) /*Safari, Chrome Linear gradients*/
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
/*IE*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

<angle>

An angle of direction for the gradient. See <angle>.

<side-or-corner>

Represents the position of the starting-point of the gradient line.

It consists of two keywords: the first one indicates the horizontal side, (left or right), and the second one the vertical side, (top or bottom). The order is not relevant and each of the keyword is optional.

The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.

<color-stop>

<color> [ <percentage between 0% and 100%> | <length along the gradient axis> ]

Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

background-color:#ffffff;
background-image: -moz-linear-gradient(90deg, #cccccc, #0000ff 33px); /* Firefox 3.6+*/
background-image: -webkit-linear-gradient(90deg, #cccccc, #0000ff 33px); /*Chrome 10.0+ & Safari 5.1+*/
background-image: -o-linear-gradient(90deg, #cccccc, #0000ff 33px); /*Opera 11.10+*/
background-image: -ms-linear-gradient(90deg, #cccccc, #0000ff 33px); /*IE 10+*/ 
background-image: linear-gradient(90deg, #cccccc, #0000ff 33px)

	
    THIS WORKS IN ALL BROWSERS
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */
      background: -ms-linear-gradient(black, white); /* IE10 */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
      background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
      background: -o-linear-gradient(black, white); /* Opera 11.10 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
      background: linear-gradient(black, white); /* the standard */
      
      

background: linear-gradient(top, red 0%, orange 15%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 100%);  
}   

background-image: -moz-linear-gradient(-45deg,red,blue);

Example: Multiple color stops

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);  

Transparency

Cross-browser gradients

Left to Right

background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff)); 

Right to Left Gradient

background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff)); 

Upper-Left to Lower-Right Gradient

background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff)); 

Upper-Left to Lower-Right Sunshine Gradient

background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white)); 

Top to Bottom Plateau Gradient

background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), 
             color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2)); 

Browser Support

• Safari 5.1+
• Firefox 3.6+
• Opera 11.1+
• Chrome
• IE 10+

Links

• http://westciv.com/tools/gradients/index.html

top of page

Page last updated: June 06, 2012 16:55 PM