mozilla

Compare Revisions

Using CSS gradients

Change Revisions

Revision 371517:

Revision 371517 by chrisk8er on

Revision 372561:

Revision 372561 by netfuzzer55 on

Title:
Using CSS gradients
Using CSS gradients
Slug:
CSS/Tutorials/Using_CSS_gradients
CSS/Tutorials/Using_CSS_gradients
Tags:
"css", "css3-images"
"css", "css3-images"
Content:

Revision 371517
Revision 372561
n8      <strong>CSS gradients</strong> are new types of {{xref_cssin8      aaaaaaaaaaaaaaaaaaaa
>mage}} added in the <a href="/en-US/docs/CSS/CSS3" title="CSS3">C 
>SS3</a> Image Module. Using CSS gradients lets you display smooth 
> transitions between two or more specified colors; this lets you  
>avoid using images for these effects, thereby reducing download t 
>ime and bandwidth usage. In addition, because the gradient is gen 
>erated by the browser, objects with gradients look better when zo 
>omed, and you can adjust your layout much more flexibly. 
t10    <p>t
11      Browsers support two types of gradients: <em>linear</em>, d
>efined with the {{cssxref("linear-gradient")}} function, and <em> 
>radial</em>, defined with {{cssxref("radial-gradient")}}. 
12    </p>
13    <h2 id="Linear_gradients" name="Linear_gradients">
14      Linear gradients
15    </h2>
16    <p>
17      To create a linear gradient, you set a starting point and a
> direction (specified as an angle) along which the gradient effec 
>t is applied. You also define <strong>color stops</strong>. Color 
> stops are the colors you want Gecko to render smooth transitions 
> among, and you must specify at least two of them, but can specif 
>y more to create more complex gradient effects. 
18    </p>
19    <h3 id="Simple_linear_gradients" name="Simple_linear_gradient
>s"> 
20      Simple linear gradients
21    </h3>
22    <p>
23      Here's a linear gradient that starts at the center (horizon
>tally) and top (vertically), and starts blue, transitioning to wh 
>ite. 
24    </p>
25    <table class="standard-table">
26      <tbody>
27        <tr>
28          <td class="header">
29            Screen Shot
30          </td>
31          <td class="header">
32            Live Demo
33          </td>
34        </tr>
35        <tr>
36          <td>
37            <img alt="" border="0" src="/@api/deki/files/3950/=ba
>sic_linear_bluetop.png" style="text-align: center;"> 
38          </td>
39          <td>
40            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(top, blue 
>, white);background: -moz-linear-gradient(to bottom, blue, white) 
>;background: -ms-linear-gradient(top, blue, white);background: -o 
>-linear-gradient(top, blue, white);background: -webkit-linear-gra 
>dient(top, blue, white);"> 
41              &nbsp;
42            </div>
43          </td>
44        </tr>
45      </tbody>
46    </table>
47    <div style="margin-right:255px;">
48      <pre class="brush: css">
49/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */ 
50background: -prefix-linear-gradient(top, blue, white); 
51 
52/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */ 
53background: linear-gradient(to bottom, blue, white);
54</pre>
55    </div>
56    <p>
57      (See <a href="/en-US/docs/CSS/linear-gradient#Browser_compa
>tibility" title="CSS/linear-gradient#Browser_compatibility">brows 
>er compatibility table</a> for an overview of the prefixes necess 
>ary to support different browser versions). 
58    </p>
59    <p>
60      Changing the same gradient to run from left to right:
61    </p>
62    <table class="standard-table">
63      <tbody>
64        <tr>
65          <td class="header">
66            Screen Shot
67          </td>
68          <td class="header">
69            Live Demo
70          </td>
71        </tr>
72        <tr>
73          <td>
74            <img alt="basic_linear_blueleft.png" class="internal 
>default" src="/@api/deki/files/3951/=basic_linear_blueleft.png"> 
75          </td>
76          <td>
77            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(left, blu 
>e, white);background: -moz-linear-gradient(to right, blue, white) 
>;background: -ms-linear-gradient(left, blue, white);background: - 
>o-linear-gradient(left, blue, white);background: -webkit-linear-g 
>radient(left, blue, white);"> 
78              &nbsp;
79            </div>
80          </td>
81        </tr>
82      </tbody>
83    </table>
84    <pre class="brush: css">
85/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */ 
86background: -prefix-linear-gradient(left, blue, white); 
87 
88/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */ 
89background: linear-gradient(to right, blue, white); 
90</pre>
91    <p>
92      (See&nbsp;<a href="/en-US/docs/CSS/linear-gradient#Browser_
>compatibility" title="CSS/linear-gradient#Browser_compatibility"> 
>browser compatibility table</a>&nbsp;for an overview of the prefi 
>ces necessary to support different browser versions). 
93    </p>
94    <p>
95      You can make the gradient run diagonally by specifying both
> the horizontal and vertical starting positions. For example: 
96    </p>
97    <table class="standard-table">
98      <tbody>
99        <tr>
100          <td class="header">
101            Screen Shot
102          </td>
103          <td class="header">
104            Live Demo
105          </td>
106        </tr>
107        <tr>
108          <td>
109            <img alt="basic_linear_bluetopleft.png" class="intern
>al default" src="/@api/deki/files/3952/=basic_linear_bluetopleft. 
>png"> 
110          </td>
111          <td>
112            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(left top, 
> blue, white);background: -moz-linear-gradient(to bottom right, b 
>lue, white);background: -ms-linear-gradient(left top, blue, white 
>);background: -o-linear-gradient(left top, blue, white);backgroun 
>d: -webkit-linear-gradient(left top, blue, white);"> 
113              &nbsp;
114            </div>
115          </td>
116        </tr>
117      </tbody>
118    </table>
119    <pre class="brush: css">
120/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */ 
121background: -prefix-linear-gradient(left top, blue, white); 
122 
123/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */ 
124background: linear-gradient(to bottom right, blue, white);
125</pre>
126    <h3 id="Using_angles" name="Using_angles">
127      Using angles
128    </h3>
129    <p>
130      If you don't specify an angle, one is determined automatica
>lly based on the given direction. If you'd like more control over 
> the direction of the gradient, you can set the angle specificall 
>y. 
131    </p>
132    <p>
133      For example, here are two gradients, the first one with a d
>irection of towards the right, and the second one has an angle of 
> 70 degrees. 
134    </p>
135    <p>
136      <img alt="linear_gradient_angle.png" class="internal defaul
>t" src="/@api/deki/files/3953/=linear_gradient_angle.png"> 
137    </p>
138    <p>
139      The one on the right uses CSS like this:
140    </p>
141    <pre class="brush: css">
142background: linear-gradient(70deg, black, white);
143</pre>
144    <p>
145      The angle is specified as an angle between a horizontal lin
>e and the gradient line, going counter-clockwise. In other words, 
> <code>0deg</code> creates a vertical gradient from the bottom to 
> the top, while <code>90deg</code> generates a left to right hori 
>zontal gradient : 
146    </p>
147    <p>
148      <img alt="linear_redangles.png" class="internal default" sr
>c="/files/3811/linear_red_angles.png"> 
149    </p>
150    <pre class="brush: css">
151background: linear-gradient(&lt;angle&gt;, red, white);
152</pre>
153    <div class="note style-wrap">
154      <p>
155        <strong>Note:</strong> several browsers implement, prefix
>ed, an older draft of the specification where <code>0deg</code> w 
>as pointing to the right rather than to the top. Pay attention in 
> the value of the angle when mixing prefixed and standard linear- 
>gradient. &nbsp;An easy formula to remember is 90 - x = y, where  
>x is the standard usage, and y is the non-standard, vendor-prefix 
>ed usage. 
156      </p>
157    </div>
158    <h3 id="Linear_gradients-Color_stops" name="Linear_gradients-
>Color_stops"> 
159      Color stops
160    </h3>
161    <p>
162      Color stops are points along the gradient line that will ha
>ve a specific color at that location. The location can be specifi 
>ed as either a percentage of the length of the line, or as an abs 
>olute length. You may specify as many color stops as you like in  
>order to achieve the desired effect. 
163    </p>
164    <p>
165      If you specify the location as a percentage, <code>0%</code
>> represents the starting point, while <code>100%</code> represen 
>ts the ending point; however, you can use values outside that ran 
>ge if necessary to get the effect you want. 
166    </p>
167    <h4 id="Linear_gradients-Example.3A_Three_color_stops" name="
>Linear_gradients-Example.3A_Three_color_stops"> 
168      Example: Three color stops
169    </h4>
170    <p>
171      This example specifies three color stops:
172    </p>
173    <table class="standard-table">
174      <tbody>
175        <tr>
176          <td class="header">
177            Screen Shot
178          </td>
179          <td class="header">
180            Live Demo
181          </td>
182        </tr>
183        <tr>
184          <td>
185            <img alt="linear_colorstops1.png" class="internal def
>ault" src="/@api/deki/files/3955/=linear_colorstops1.png"> 
186          </td>
187          <td>
188            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(center to 
>p , blue, white 80%, orange);background: -moz-linear-gradient(to  
>bottom, blue, white 80%, orange);background: -ms-linear-gradient( 
>center top , blue, white 80%, orange);background: -o-linear-gradi 
>ent(center top , blue, white 80%, orange); background: -webkit-li 
>near-gradient(top , blue, white 80%, orange); background: linear- 
>gradient(to bottom, blue, white 80%, orange);"> 
189              &nbsp;
190            </div>
191          </td>
192        </tr>
193      </tbody>
194    </table>
195    <pre class="brush: css">
196/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */ 
197background: -prefix-linear-gradient(top, blue, white 80%, orange)
>; 
198 
199/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */ 
200background: linear-gradient(to bottom, blue, white 80%, orange);
201</pre>
202    <p>
203      Note that the first and last color stops don't specify a lo
>cation; because of that, values of 0% and 100% are assigned autom 
>atically. The middle color stop specifies a location of 80%, putt 
>ing it most of the way toward the bottom. 
204    </p>
205    <h4 id="Linear_gradients-Example.3A_Evenly_spaced_color_stops
>" name="Linear_gradients-Example.3A_Evenly_spaced_color_stops"> 
206      Example: Evenly spaced color stops
207    </h4>
208    <p>
209      Here's an example using a wide variety of colors, all evenl
>y spaced: 
210    </p>
211    <table class="standard-table">
212      <tbody>
213        <tr>
214          <td class="header">
215            Screen Shot
216          </td>
217          <td class="header">
218            Live Demo
219          </td>
220        </tr>
221        <tr>
222          <td>
223            <img alt="linear_rainbow.png" class="internal default
>" src="/@api/deki/files/3956/=linear_rainbow.png"> 
224          </td>
225          <td>
226            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(left, red 
>, orange, yellow, green, blue) repeat scroll 0% 0% transparent;ba 
>ckground: -moz-linear-gradient(to right, red, orange, yellow, gre 
>en, blue) repeat scroll 0% 0% transparent;background: -ms-linear- 
>gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 
> 0% transparent;background: -o-linear-gradient(left, red, orange, 
> yellow, green, blue) repeat scroll 0% 0% transparent;background: 
> -webkit-linear-gradient(left, red, orange, yellow, green, blue)  
>repeat scroll 0% 0% transparent;"> 
227              &nbsp;
228            </div>
229          </td>
230        </tr>
231      </tbody>
232    </table>
233    <pre class="brush: css">
234/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */ 
235background: -prefix-linear-gradient(left, red, orange, yellow, gr
>een, blue); 
236 
237/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */ 
238background: linear-gradient(to right, red, orange, yellow, green,
> blue); 
239</pre>
240    <p>
241      Notice that the color stops are automatically spaced evenly
> when no locations are specified. 
242    </p>
243    <h3 id="Transparency_and_gradients" name="Transparency_and_gr
>adients"> 
244      Transparency and gradients
245    </h3>
246    <p>
247      Gradients support transparency. You can use this, for examp
>le, when stacking multiple backgrounds, to create fading effects  
>on background images. For example: 
248    </p>
249    <p>
250      <img alt="for Transparency and gradients example" class="in
>ternal default" src="/files/4275/linear_multibg_transparent2.png" 
> style="width: 643px; height: 119px;"> 
251    </p>
252    <pre class="brush: css">
253/* The old syntax, deprecated, but still needed, prefixed, for We
>bKit-based and old browsers */  
254background: linear-gradient(left, rgba(255,255,255,0), rgba(255,2
>55,255,1)), url(http://foo.com/image.jpg); 
255 
256/* The new syntax needed by standard-compliant browsers (Opera 12
>.1, IE 10, Fx 16 onwards), without prefix */   
257background: linear-gradient(to right, rgba(255,255,255,0), rgba(2
>55,255,255,1)), url(http://foo.com/image.jpg); 
258</pre>
259    <p>
260      The backgrounds are stacked with the first specified backgr
>ound on top, and each successive background farther away. By stac 
>king backgrounds this way, you can create very creative effects a 
>s seen above. 
261    </p>
262    <h2 id="Radial_gradients" name="Radial_gradients">
263      Radial gradients
264    </h2>
265    <p>
266      Radial gradients are specified using the {{cssxref("radial-
>gradient")}} functional notation. The syntax is similar to that f 
>or linear gradients, except you can specify the gradient's ending 
> shape (whether it should be a circle or ellipse) as well as its  
>size. By default, the ending shape is an ellipse with the same pr 
>oportions than the container's box. 
267    </p>
268    <h3 id="Radial_gradients-Color_stops" name="Radial_gradients-
>Color_stops"> 
269      Color stops
270    </h3>
271    <p>
272      You specify color stops the same way as for linear gradient
>s. The gradient line extends out from the starting position in al 
>l directions. 
273    </p>
274    <h4 id="Radial_gradients-Example.3A_Evenly_spaced_color_stops
>" name="Radial_gradients-Example.3A_Evenly_spaced_color_stops"> 
275      Example: Evenly spaced color stops
276    </h4>
277    <p>
278      By default, as with linear gradients, the color stops are e
>venly spaced: 
279    </p>
280    <table class="standard-table">
281      <tbody>
282        <tr>
283          <td class="header">
284            Screen Shot
285          </td>
286          <td class="header">
287            Live Demo
288          </td>
289        </tr>
290        <tr>
291          <td>
292            <img alt="radial_gradient_even.png" class="internal d
>efault" src="/@api/deki/files/3958/=radial_gradient_even.png"> 
293          </td>
294          <td>
295            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-linear-gradient(left, red 
>, orange, yellow, green, blue) repeat scroll 0% 0% transparent;ba 
>ckground: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));ba 
>ckground: -ms-radial-gradient(red, yellow, rgb(30, 144, 255));bac 
>kground: -o-radial-gradient(red, yellow, rgb(30, 144, 255));backg 
>round: -webkit-radial-gradient(red, yellow, rgb(30, 144, 255));"> 
296              &nbsp;
297            </div>
298          </td>
299        </tr>
300      </tbody>
301    </table>
302    <pre class="brush: css">
303background: radial-gradient(red, yellow, rgb(30, 144, 255));
304</pre>
305    <h4 id="Radial_gradients-Example.3A_Explicitly_spaced_color_s
>tops" name="Radial_gradients-Example.3A_Explicitly_spaced_color_s 
>tops"> 
306      Example: Explicitly spaced color stops
307    </h4>
308    <p>
309      Here we specify specific locations for the color stops:
310    </p>
311    <table class="standard-table">
312      <tbody>
313        <tr>
314          <td class="header">
315            Screen Shot
316          </td>
317          <td class="header">
318            Live Demo
319          </td>
320        </tr>
321        <tr>
322          <td>
323            <img alt="radial_gradient_varied.png" class="internal
> default" src="/@api/deki/files/3959/=radial_gradient_varied.png" 
>> 
324          </td>
325          <td>
326            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-radial-gradient(red 5%, y 
>ellow 25%, #1E90FF 50%);background: -ms-radial-gradient(red 5%, y 
>ellow 25%, #1E90FF 50%);background: -o-radial-gradient(red 5%, ye 
>llow 25%, #1E90FF 50%);background: -webkit-radial-gradient(red 5% 
>, yellow 25%, #1E90FF 50%)"> 
327              &nbsp;
328            </div>
329          </td>
330        </tr>
331      </tbody>
332    </table>
333    <pre class="brush: css">
334background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
335</pre>
336    <h3 id="Size" name="Size">
337      Size
338    </h3>
339    <p>
340      This is one of the areas in which radial gradients differ f
>rom linear gradients. You can provide a size value that specifies 
> the point that defines the size of the circle or ellipse. See <a 
> href="/en-US/docs/CSS/radial-gradient#Size_constants" title="CSS 
>/-moz-radial-gradient#Size constants">this description of the siz 
>e constants</a> for specifics. 
341    </p>
342    <h4 id="Example.3A_closest-side_for_ellipses" name="Example.3
>A_closest-side_for_ellipses"> 
343      Example: closest-side for ellipses
344    </h4>
345    <p>
346      This ellipse uses the <code>closest-side</code> size value,
> which means the size is set by the distance from the starting po 
>int (the center) to the closest side of the enclosing box. 
347    </p>
348    <table class="standard-table">
349      <tbody>
350        <tr>
351          <td class="header">
352            Screen Shot
353          </td>
354          <td class="header">
355            Live Demo
356          </td>
357        </tr>
358        <tr>
359          <td>
360            <img alt="radial_ellipse_size1.png" class="internal d
>efault" src="/@api/deki/files/3960/=radial_ellipse_size1.png"> 
361          </td>
362          <td>
363            <div style="width: 250px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-radial-gradient(ellipse c 
>losest-side, red, yellow 10%, #1E90FF 50%, white);background: -ms 
>-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 5 
>0%, white);background: -o-radial-gradient(ellipse closest-side, r 
>ed, yellow 10%, #1E90FF 50%, white);background: -webkit-radial-gr 
>adient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white) 
>"> 
364              &nbsp;
365            </div>
366          </td>
367        </tr>
368      </tbody>
369    </table>
370    <pre class="brush: css">
371background: radial-gradient(ellipse closest-side, red, yellow 10%
>, #1E90FF 50%, white); 
372</pre>
373    <h4 id="Example.3A_farthest-corner_for_ellipses" name="Exampl
>e.3A_farthest-corner_for_ellipses"> 
374      Example: farthest-corner for ellipses
375    </h4>
376    <p>
377      This example is similar to the previous one, except that it
>s size is specified as <code>farthest-corner</code>, which sets t 
>he size of the gradient by the distance from the starting point t 
>o the farthest corner of the enclosing box from the starting poin 
>t. 
378    </p>
379    <table class="standard-table">
380      <tbody>
381        <tr>
382          <td class="header">
383            Screen Shot
384          </td>
385          <td class="header">
386            Live Demo
387          </td>
388        </tr>
389        <tr>
390          <td>
391            <img alt="radial_ellipse_size2.png" class="internal d
>efault" src="/@api/deki/files/3961/=radial_ellipse_size2.png"> 
392          </td>
393          <td>
394            <div style="width: 250px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-radial-gradient(ellipse f 
>arthest-corner, red, yellow 10%, #1E90FF 50%, white);background:  
>-ms-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E 
>90FF 50%, white);background: -o-radial-gradient(ellipse farthest- 
>corner, red, yellow 10%, #1E90FF 50%, white);background: -webkit- 
>radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 
> 50%, white)"> 
395              &nbsp;
396            </div>
397          </td>
398        </tr>
399      </tbody>
400    </table>
401    <pre class="brush: css">
402background: radial-gradient(ellipse farthest-corner, red, yellow 
>10%, #1E90FF 50%, white); 
403</pre>
404    <h4 id="Example.3A_closest-side_for_circles" name="Example.3A
>_closest-side_for_circles"> 
405      Example: closest-side for circles
406    </h4>
407    <p>
408      This example uses <code>closest-side</code>, which determin
>es the circle's size as the distance between the start point (the 
> center) and the closest side. 
409    </p>
410    <table class="standard-table">
411      <tbody>
412        <tr>
413          <td class="header">
414            Screen Shot
415          </td>
416          <td class="header">
417            Live Demo
418          </td>
419        </tr>
420        <tr>
421          <td>
422            <img alt="radial_circle_size1.png" class="internal de
>fault" src="/@api/deki/files/3962/=radial_circle_size1.png"> 
423          </td>
424          <td>
425            <div style="width: 250px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-radial-gradient(circle cl 
>osest-side, red, yellow 10%, #1E90FF 50%, white);background: -ms- 
>radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50% 
>, white);background: -o-radial-gradient(circle closest-side, red, 
> yellow 10%, #1E90FF 50%, white);background: -webkit-radial-gradi 
>ent(circle closest-side, red, yellow 10%, #1E90FF 50%, white)"> 
426              &nbsp;
427            </div>
428          </td>
429        </tr>
430      </tbody>
431    </table>
432    <pre class="brush: css">
433background: radial-gradient(circle closest-side, red, yellow 10%,
> #1E90FF 50%, white); 
434</pre>
435    <p>
436      Here, the circle's radius is half the height of the box, si
>nce the top and bottom edges are equidistant from the start point 
> and are closer than the left and right edges. 
437    </p>
438    <h2 id="Repeating_gradients" name="Repeating_gradients">
439      Repeating gradients
440    </h2>
441    <p>
442      The {{cssxref("linear-gradient")}} and {{cssxref("radial-gr
>adient")}} properties don't support automatically repeating the c 
>olor stops. However, the {{cssxref("repeating-linear-gradient")}} 
> and {{cssxref("repeating-radial-gradient")}} properties are avai 
>lable to offer this functionality. 
443    </p>
444    <h3 id="Examples.3A_Repeating_linear_gradient" name="Examples
>.3A_Repeating_linear_gradient"> 
445      Examples: Repeating linear gradient
446    </h3>
447    <p>
448      This example uses {{cssxref("repeating-linear-gradient")}} 
>to create a gradient: 
449    </p>
450    <table class="standard-table">
451      <tbody>
452        <tr>
453          <td class="header">
454            Screen Shot
455          </td>
456          <td class="header">
457            Live Demo
458          </td>
459        </tr>
460        <tr>
461          <td>
462            <img alt="repeating_linear_gradient.png" class="inter
>nal default" src="/@api/deki/files/3964/=repeating_linear_gradien 
>t.png" style=""> 
463          </td>
464          <td>
465            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-repeating-linear-gradient 
>(top left -45deg, red, red 5px, white 5px, white 10px);background 
>: -ms-repeating-linear-gradient(top left -45deg, red, red 5px, wh 
>ite 5px, white 10px);background: -o-repeating-linear-gradient(top 
> left -45deg, red, red 5px, white 5px, white 10px);background: -w 
>ebkit-repeating-linear-gradient(-45deg, red, red 5px, white 5px,  
>white 10px)"> 
466              &nbsp;
467            </div>
468          </td>
469        </tr>
470      </tbody>
471    </table>
472    <pre class="brush: css">
473background: repeating-linear-gradient(-45deg, red, red 5px, white
> 5px, white 10px); 
474</pre>
475    <p>
476      Another example using the {{cssxref("repeating-linear-gradi
>ent")}} property. 
477    </p>
478    <p>
479      <a href="/@api/deki/files/6192/=repeat_background_gradient_
>checked.png" title="repeat_background_gradient_checked.png"><img  
>alt="repeat_background_gradient_checked.png" class="internal defa 
>ult" src="/@api/deki/files/6192/=repeat_background_gradient_check 
>ed.png?size=thumb" style="width: 160px; height: 160px;"></a> 
480    </p>
481    <pre class="brush: css">
482background-color: #000;
483background-image: repeating-linear-gradient(90deg, transparent, t
>ransparent 50px, 
484      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
> transparent 56px, transparent 63px, 
485      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
> transparent 69px, transparent 116px, 
486      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166p
>x), 
487repeating-linear-gradient(0deg, transparent, transparent 50px, rg
>ba(255, 127, 0, 0.25) 50px, 
488      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent
> 63px, rgba(255, 127, 0, 0.25) 63px, 
489      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent
> 116px, rgba(255, 206, 0, 0.25) 116px, 
490      rgba(255, 206, 0, 0.25) 166px),
491repeating-linear-gradient(-45deg, transparent, transparent 5px, r
>gba(143, 77, 63, 0.25) 5px, 
492      rgba(143, 77, 63, 0.25) 10px),
493repeating-linear-gradient(45deg, transparent, transparent 5px, rg
>ba(143, 77, 63, 0.25) 5px, 
494      rgba(143, 77, 63, 0.25) 10px);
495</pre>
496    <h3 id="Example.3A_Repeating_radial_gradient" name="Example.3
>A_Repeating_radial_gradient"> 
497      Example: Repeating radial gradient
498    </h3>
499    <p>
500      This example uses {{cssxref("repeating-radial-gradient")}} 
>to create a gradient: 
501    </p>
502    <table class="standard-table">
503      <tbody>
504        <tr>
505          <td class="header">
506            Screen Shot
507          </td>
508          <td class="header">
509            Live Demo
510          </td>
511        </tr>
512        <tr>
513          <td>
514            <img alt="repeating_radial_gradient.png" class="inter
>nal default" src="/@api/deki/files/3965/=repeating_radial_gradien 
>t.png"> 
515          </td>
516          <td>
517            <div style="width: 100px; height: 100px; border: 1px 
>solid rgb(51, 51, 51); background: -moz-repeating-radial-gradient 
>(black, black 5px, white 5px, white 10px);background: -ms-repeati 
>ng-radial-gradient(black, black 5px, white 5px, white 10px);backg 
>round: -o-repeating-radial-gradient(black, black 5px, white 5px,  
>white 10px);background: -webkit-repeating-radial-gradient(black,  
>black 5px, white 5px, white 10px)"> 
518              &nbsp;
519            </div>
520          </td>
521        </tr>
522      </tbody>
523    </table>
524    <pre class="brush: css">
525background: repeating-radial-gradient(black, black 5px, white 5px
>, white 10px); 
526</pre>
527    <h2 id="See_also" name="See_also">
528      See also
529    </h2>
530    <ul>
531      <li>Gradient-related reference articles: {{xref_cssimage}},
> {{xref_cssgradient}}, {{cssxref("linear-gradient")}}, {{cssxref( 
>"radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, { 
>{cssxref("repeating-radial-gradient")}}. 
532      </li>
533    </ul>

Back to History