Internet Explorer 10 and Windows apps using JavaScript support Cascading Style Sheets, Level 3 (CSS3) Gradients in any property that accepts images, such as the background-image property (plus the image value of the background shorthand property), the list-style-image property, and generated content. Gradients act as specified in the Gradients section of the CSS3 Image Values and Replaced Content Module, which, as of this writing, is in the Candidate Recommendation stage.
Gradients are images that transition smoothly from one color to another. Internet Explorer 10 supports linear, circular, and elliptical CSS3 gradients, each of which are specified by a gradient line and two or more stop points. Each stop point has its own color, and Windows Internet Explorer fills in the area between each set of points with a continuous color transition from one to the other.
Linear gradients
In a linear gradient, colors transition smoothly along a line. Linear gradients are created by first specifying a gradient line for the gradient to follow, and then the two or more color stop points, separated by commas. The basic linear gradient syntax is as follows:
Specifies a linear gradient by specifying a gradient line and two or more stop colors and offsets.
The possible values for the property are as follows:
<angle>
Optional. The angle that the gradient line should assume, expressed as a number followed by an angle units designator (for instance, "deg").
"0deg" points upward and positive angles increase in a clockwise direction. Therefore, "90deg" points toward the right, "180deg" points downward, and so on.
If no angle is provided, the gradient line starts in the corner or side opposite the corner or side specified by <side-or-corner>.
<side-or-corner>
Optional value that specifies an ending corner or side for the gradient. This value begins with "to", which is followed by one or two of the following keywords. Including one keyword specifies an ending side, and two keywords specify an ending corner.
The following values can be used as the first value only:
left Indicates gradient ends on the left.
right Indicates gradient ends on the right.
The following values can be used as the second value only:
top Indicates gradient ends on the top.
bottom Indicates gradient ends on the bottom.
Not including any keywords or angle is equivalent to "to bottom".
<color-stop>
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
Each stop point can have an optional percentage or supported length value that indicates where along the gradient line to place the color stop. "0%" (or "0px", "0em", and so on) indicates the starting point (or side); "100%" indicates the ending point (or side).
The following linear gradient (used as the argument for the background-image property) has three color stops:
The first color stop is in the top-right corner and defines a gradient line that extends to the bottom-left corner. The first stop is a shade of yellow.
The second color stop is halfway along the gradient line and is a shade of green.
The final color stop is 80% of the way along the gradient line and is a shade of blue. From this stop to the end of the gradient line (between 80% and 100%), the color remains this shade of blue.
The gradient line starts in the top-right corner of the rectangle and ends in the bottom-left corner. The actual angle depends on the dimensions of the element that the gradient fills.
Of course, if the size of the fill area changes, these two gradients look different. Keep this in mind when deciding how to specify your gradients. The first defined gradient (with "to bottom left" specified) is pictured here in a 450px-by-150px box.
The second defined gradient (with "210deg" specified) is pictured here in the same size box.
Radial gradients
In contrast to linear gradients, which progress from one end of a line to the other, radial gradients emerge from a single point, and then smoothly spread outward in a circle or ellipse. You specify a radial gradient by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, and is separated by commas. The basic radial gradient syntax is as follows:
Specifies a radial gradient by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, separated by commas.
The possible values for the property are as follows:
<shape>
Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.
ellipse Indicates gradient is in the shape of an ellipse.
circle Indicates gradient is in the shape of an circle.
<size>
Optional value that specifies the size of the gradient's ending shape. If this value is omitted, it defaults to farthest-corner.
<length(s)>
One or two space-delimited length values or two percentages.
If one length value is specified, it indicates the radius of the circle.
If two values (length or percent) are specified, the first value represents the horizontal radius, and the second the vertical radius.
Percentage values are relative to the corresponding dimension of the gradient box. Percentages can only be used to specify the size of an elliptical gradient, not a circular one.
Negative values are invalid.
closest-side For circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center.
closest-corner Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if closest-side was specified.
farthest-side Similar to closest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients).
farthest-corner Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if farthest-side was specified.
<position>
Optional value that specifies the center of the gradient. This value can take the same values as the background-position property. If this value is omitted, it defaults to center.
<color-stop>
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
The second component is an optional percentage or decimal value that indicates where along the gradient ray (similar to a gradient line in a linear-gradient, but from the center outward) to place the color stop. "0%" indicates the start of the gradient ray, and "100%" indicates the point where the gradient ray intersects the ending shape. For instance, a value of "20%" indicates the color stop should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line. Values can be negative, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere between the specified color and the next color. Values can be greater than 100%, which specifies a location a correspondingly greater distance from the center of the gradient.
Often different radial gradient syntax can be used to produce the same results. For instance, all three of the following examples, when applied to a 250×150-pixel div element, produce the image shown here.
background-image: radial-gradient(yellow, blue);
background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);
background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);
The following example is similar to the previous example, but a circular gradient has been specified.
The following example has three colors specified. Either of the declarations produces the image here.
background-image: radial-gradient(#FFF133, #16D611, #00A3EF);
background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);
Of course, you can also originate the radial gradient in locations other than the center of the gradient box. Use the closest-side or farthest-side keywords to size the gradient so that the ending shape meets either the closest or farthest side, respectively, of the gradient box.
background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);
The following examples set the center of the gradient at 40px from the left side of the gradient box and 50px from the top side of the gradient box. The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides.
background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);
The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides.
background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);
If you use closest-side or farthest-side with circular gradients, the size is determined by the closest side of the gradient box. For the following closest-side example, that side is the left side.
background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
For the following farthest-side example, the size of the circle gradient is determined by the right side of the gradient box.
background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
Repeating gradients
Internet Explorer 10 and Windows apps using JavaScript also support repeating linear and radial gradients. The syntax of each of the repeating gradient properties is identical to its non-repeating sibling.
The basic repeating linear gradient syntax is as follows:
Specifies a repeating linear gradient by specifying a gradient line and two or more stop colors and offsets.
The possible values for the property are as follows:
<angle>
Optional. The angle the gradient line should assume, expressed as a number followed by an angle units designator (for instance, "deg").
"0deg" points upward and positive angles increase in a clockwise direction. Therefore, "90deg" points toward the right, "180deg" points downward, and so on.
If no angle is provided, the gradient line starts in the corner or side opposite the corner or side specified by <side-or-corner>.
<side-or-corner>
Optional value that specifies an ending corner or side for the gradient. This value begins with "to", which is followed by one or two of the following keywords. Including one keyword specifies an ending side, and two keywords specify an ending corner.
The following values can be used as the first value only:
left Indicates gradient ends on the left.
right Indicates gradient ends on the right.
The following values can be used as the second value only:
top Indicates gradient ends on the top.
bottom Indicates gradient ends on the bottom.
Not including any keywords or angle is equivalent to "to bottom".
<color-stop>
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
Each stop point can have an optional percentage or supported length value that indicates where along the gradient line to place the color stop. "0%" (or "0px", "0em", and so on) indicates the starting point (or side); "100%" indicates the ending point (or side).
After the last color stop has been reached, the gradient starts again at the first color stop and repeats. It's a good idea to specify identical colors for the first and last color stops to prevent abrupt color changes between each repeating group.
Following is an example of a repeating linear gradient. It transitions between two colors—blue and yellow.
Specifies a repeating radial gradient by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, separated by commas.
The possible values for the property are as follows:
<shape>
Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.
ellipse Indicates gradient is in the shape of an ellipse.
circle Indicates gradient is in the shape of a circle.
<size>
Optional value that specifies the size of the gradient's ending shape. Its possible values are either two space-delimited length values (or percentages) or one of the following keywords. If this value is omitted, it defaults to farthest-corner.
<length(s)>
One or two space-delimited length values or two percentages.
If one length value is specified, it indicates the radius of the circle.
If two values (length or percent) are specified, the first value represents the horizontal radius, and the second the vertical radius.
Percentage values are relative to the corresponding dimension of the gradient box. Percentages can only be used to specify the size of an elliptical gradient, not a circular one.
Negative values are invalid.
closest-side For circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center.
closest-corner Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if closest-side was specified.
farthest-side Similar to closest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients).
farthest-corner Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if farthest-side was specified.
<position>
Optional value that specifies the center of the gradient. This value can take the same values as the background-position property. If this value is omitted, it defaults to center.
<color-stop>
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
The second component is an optional percentage or decimal value that indicates where along the gradient ray (similar to a gradient line in a linear-gradient, but from the center outward) to place the color stop. "0%" indicates the start of the gradient ray, and "100%" indicates the point where the gradient ray intersects the ending shape. For instance, a value of "20%" indicates the color stop should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line. Values can be negative, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere between the specified color and the next color. Values can be greater than 100%, which specifies a location a correspondingly greater distance from the center of the gradient.
After the last color stop has been reached, the gradient starts again at the first color stop and repeats. It's a good idea to specify identical colors for the first and last color stops to prevent abrupt color changes between each repeating group.
The following declaration creates a repeating circular gradient.
background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
The following declaration creates a repeating elliptical gradient.
background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);
Gradient Midpoints
Microsoft Edge introduced support for CSS Gradient Midpoints, or color hints. With CSS Gradient Midpoints, you can specify an optional location between the color stops of a CSS gradient. The color will always be exactly between the colors of the two stops at that point. Other colors along the gradient line are calculated using an exponential interpolation function described by the CSS Image Values and Replaced Content Module Level 3 specification.
In the following example a of a 90 degree, green and yellow linear gradient, a midpoint is placed at 30%.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)