/
index.html
472 lines (346 loc) · 45.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery HW</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/vendor/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<article id="wikiArticle">
<p></p><section class="Quick_links" id="Quick_Links"><!-- --></section><p></p>
<p><span class="seoSummary"><strong>CSS gradients</strong> are new types of <a href="/en-US/docs/Web/CSS/image" title="The <image> CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree."><code><image></code></a> added in the <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a> Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors.</span> This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout with much more flexibility.</p>
<p><span class="seoSummary">Browsers support two types of gradients: <em>linear</em>, defined with the <a href="/en-US/docs/Web/CSS/linear-gradient" title="The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size of the element it applies to."><code>linear-gradient()</code></a> function, and <em>radial</em>, defined with <a href="/en-US/docs/Web/CSS/radial-gradient" title="The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type."><code>radial-gradient()</code></a>.</span></p>
<h2 name="Linear_gradients" id="Linear_gradients">Linear gradients</h2>
<p>To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect 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 specify more to create more complex gradient effects.</p>
<h3 name="Simple_linear_gradients" id="Simple_linear_gradients">Simple linear gradients</h3>
<p>Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white.</p>
<p> </p>
<h4 id="HTML">HTML</h4>
<pre dir="rtl" class="brush: html line-numbers language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>linear-gradient<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 id="css">css</h4>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="sect1"> </h4>
<h4 id="Result">Result</h4>
<p><iframe frameborder="0" class="live-sample-frame sample-code-frame" id="frame_Simple_linear_gradients" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients$samples/Simple_linear_gradients?revision=1191445"></iframe><div class="open-in-host-container"><button class="open-in-host">Open in codepen <i class="icon-codepen" aria-hidden="true"></i></button><button class="open-in-host">Open in jsfiddle <i class="icon-jsfiddle" aria-hidden="true"></i></button></div></p>
<p id="The_following_css_has_the_same_effect">The following CSS has the same effect:</p>
<div>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>top, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</div>
<h3 name="gradient_left_to_right" id="gradient_left_to_right">Changing the gradient to run from left to right</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html line-numbers language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>linear-gradient<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>left, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>(See <a href="/en-US/docs/CSS/linear-gradient#Browser_compatibility" title="CSS/linear-gradient#Browser_compatibility">browser compatibility table</a> for an overview of the prefixes necessary to support different browser versions).</p>
<p>Changing the same gradient to run from left to right:</p>
<h4 id="Result_2">Result</h4>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<h3 name="gradient diagonal" id="gradient diagonal">Making the gradient run diagonally</h3>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html line-numbers language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>linear-gradient<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>left top, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom right, blue, white<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.linear-gradient</span></span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>(See <a href="/en-US/docs/CSS/linear-gradient#Browser_compatibility" title="CSS/linear-gradient#Browser_compatibility">browser compatibility table</a> for an overview of the prefices necessary to support different browser versions).</p>
<p>You can make the gradient run diagonally by specifying both the horizontal and vertical starting positions. For example:</p>
<h4 id="Result_3">Result</h4>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3 name="Using_angles" id="Using_angles">Using angles</h3>
<p> </p>
<p>If you don't specify an angle, one is determined automatically based on the given direction. If you'd like more control over the direction of the gradient, you can set the angle specifically.</p>
<p>For example, here are two gradients, the first one with a direction of towards the right, and the second one has an angle of 70 degrees.</p>
<p></p>
<p>The one on the right uses CSS like this:</p>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token number">70</span>deg, black, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<p>The angle is specified as an angle between a vertical line 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 horizontal gradient:</p>
<p></p>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><angle>, red, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<div class="note style-wrap">
<p><strong>Note:</strong> several browsers implement, prefixed, an older draft of the specification where <code>0deg</code> was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient. An easy formula to remember is 90 - x = y, where x is the standard usage, and y is the non-standard, vendor-prefixed usage.</p>
</div>
<h3 name="Linear_gradients-Color_stops" id="Linear_gradients-Color_stops">Color stops</h3>
<p>Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.</p>
<p>If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p>
<h4 name="Linear_gradients-Example.3A_Three_color_stops" id="Linear_gradients-Example.3A_Three_color_stops">Example: Three color stops</h4>
<p>This example specifies three color stops:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>top, blue, white <span class="token number">80%</span>, orange<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom, blue, white <span class="token number">80%</span>, orange<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are automatically assigned to the first and last colors respectively. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.</p>
<h4 name="Linear_gradients-Example.3A_Evenly_spaced_color_stops" id="Linear_gradients-Example.3A_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4>
<p>Here's an example using a wide variety of colors, all evenly spaced:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>left, red, orange, yellow, green, blue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right, red, orange, yellow, green, blue<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p>
<h3 name="Transparency_and_gradients" id="Transparency_and_gradients">Transparency and gradients</h3>
<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. To achieve this, you may either use <code>rgba</code> colors, <code>hsla</code> colors or the <code>transparent</code> keyword(see <a href="/en-US/docs/Web/CSS/color_value">color values</a>). However, be aware that some browsers render the <code>transparent</code> keyword as <code>rgba(0,0,0,0)</code> instead of <code>rgba(255,255,255,0)</code>, which could cause some unexpected results (and potential dark spots) as the gradients blend together. Therefore it is safer to specify opaque gradients.</p>
<p>Here is an example of using transparency in gradients:</p>
<p></p>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* The old syntax, deprecated and prefixed, for old browsers */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-prefix-linear-gradient</span><span class="token punctuation">(</span>left, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">0</span><span class="token punctuation">)</span>,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>, <span class="token url">url(http://foo.com/image.jpg)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* The new syntax needed by standard-compliant browsers (Opera 12.1,
IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">0</span><span class="token punctuation">)</span>,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">255</span>,<span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>, <span class="token url">url(http://foo.com/image.jpg)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.</p>
<h2 name="Radial_gradients" id="Radial_gradients">Radial gradients</h2>
<p>Radial gradients are specified using the <a href="/en-US/docs/Web/CSS/radial-gradient" title="The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type."><code>radial-gradient()</code></a> functional notation. The syntax is similar to that for 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 proportions than the container's box.</p>
<h3 name="Radial_gradients-Color_stops" id="Radial_gradients-Color_stops">Color stops</h3>
<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p>
<h4 name="Radial_gradients-Example.3A_Evenly_spaced_color_stops" id="Radial_gradients-Example.3A_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4>
<p>By default, as with linear gradients, the color stops are evenly spaced:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>red, yellow, <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">30</span>, <span class="token number">144</span>, <span class="token number">255</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 name="Radial_gradients-Example.3A_Explicitly_spaced_color_stops" id="Radial_gradients-Example.3A_Explicitly_spaced_color_stops">Example: Explicitly spaced color stops</h4>
<p>Here we specify specific locations for the color stops:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>red <span class="token number">5%</span>, yellow <span class="token number">25%</span>, <span class="token hexcode">#1E90FF</span> <span class="token number">50%</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<h3 name="Size" id="Size">Size</h3>
<p>This is one of the areas in which radial gradients differ from 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 size constants</a> for specifics.</p>
<h4 name="Example.3A_closest-side_for_ellipses" id="Example.3A_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
<p>This ellipse uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>ellipse closest-side, red, yellow <span class="token number">10%</span>, <span class="token hexcode">#1E90FF</span> <span class="token number">50%</span>, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 name="Example.3A_farthest-corner_for_ellipses" id="Example.3A_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>ellipse farthest-corner, red, yellow <span class="token number">10%</span>, <span class="token hexcode">#1E90FF</span> <span class="token number">50%</span>, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<h4 name="Example.3A_closest-side_for_circles" id="Example.3A_closest-side_for_circles">Example: closest-side for circles</h4>
<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>circle closest-side, red, yellow <span class="token number">10%</span>, <span class="token hexcode">#1E90FF</span> <span class="token number">50%</span>, white<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
<h2 name="Repeating_gradients" id="Repeating_gradients">Repeating gradients</h2>
<p>The <a href="/en-US/docs/Web/CSS/linear-gradient" title="The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size of the element it applies to."><code>linear-gradient()</code></a> and <a href="/en-US/docs/Web/CSS/radial-gradient" title="The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type."><code>radial-gradient()</code></a> properties don't support automatically repeating the color stops. However, the <a href="/en-US/docs/Web/CSS/repeating-linear-gradient" title="The CSS repeating-linear-gradient function creates an <image> consisting of repeating gradients. It works similarly to the basic linear gradients as described by linear-gradient(), and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first)."><code>repeating-linear-gradient()</code></a> and <a href="/en-US/docs/Web/CSS/repeating-radial-gradient" title="This works similarly to the standard radial gradients as described by radial-gradient(), but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position."><code>repeating-radial-gradient()</code></a> properties are available to offer this functionality.</p>
<h3 name="Examples.3A_Repeating_linear_gradient" id="Examples.3A_Repeating_linear_gradient">Examples: Repeating linear gradient</h3>
<p>This example uses <a href="/en-US/docs/Web/CSS/repeating-linear-gradient" title="The CSS repeating-linear-gradient function creates an <image> consisting of repeating gradients. It works similarly to the basic linear gradients as described by linear-gradient(), and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first)."><code>repeating-linear-gradient()</code></a> to create a gradient:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>-<span class="token number">45</span>deg, red, red <span class="token number">5</span>px, white <span class="token number">5</span>px, white <span class="token number">10</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<p>Note that since no value is specified for the first color, it is automatically assigned the starting point value of each repeating portion of the gradient, i.e the effect is similar to that obtained when the starting value is given as 0px.</p>
<p>Another example using the <a href="/en-US/docs/Web/CSS/repeating-linear-gradient" title="The CSS repeating-linear-gradient function creates an <image> consisting of repeating gradients. It works similarly to the basic linear gradients as described by linear-gradient(), and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first)."><code>repeating-linear-gradient()</code></a> property.</p>
<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png" title="repeat_background_gradient_checked.png"></a></p>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#000</span><span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span><span class="token number">90</span>deg, transparent, transparent <span class="token number">50</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">50</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">56</span>px, transparent <span class="token number">56</span>px, transparent <span class="token number">63</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">63</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">69</span>px, transparent <span class="token number">69</span>px, transparent <span class="token number">116</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">206</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">116</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">206</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">166</span>px<span class="token punctuation">)</span>,
<span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span><span class="token number">0</span>deg, transparent, transparent <span class="token number">50</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">50</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">56</span>px, transparent <span class="token number">56</span>px, transparent <span class="token number">63</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">63</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">127</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">69</span>px, transparent <span class="token number">69</span>px, transparent <span class="token number">116</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">206</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">116</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span>, <span class="token number">206</span>, <span class="token number">0</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">166</span>px<span class="token punctuation">)</span>,
<span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>-<span class="token number">45</span>deg, transparent, transparent <span class="token number">5</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">143</span>, <span class="token number">77</span>, <span class="token number">63</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">5</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">143</span>, <span class="token number">77</span>, <span class="token number">63</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">10</span>px<span class="token punctuation">)</span>,
<span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span><span class="token number">45</span>deg, transparent, transparent <span class="token number">5</span>px, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">143</span>, <span class="token number">77</span>, <span class="token number">63</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">5</span>px,
<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">143</span>, <span class="token number">77</span>, <span class="token number">63</span>, <span class="token number">0.25</span><span class="token punctuation">)</span> <span class="token number">10</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 name="Example.3A_Repeating_radial_gradient" id="Example.3A_Repeating_radial_gradient">Example: Repeating radial gradient</h3>
<p>This example uses <a href="/en-US/docs/Web/CSS/repeating-radial-gradient" title="This works similarly to the standard radial gradients as described by radial-gradient(), but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position."><code>repeating-radial-gradient()</code></a> to create a gradient:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Screen Shot</td>
<td class="header">Live Demo</td>
</tr>
<tr>
<td></td>
<td>
<div style=""> </div>
</td>
</tr>
</tbody>
</table>
<pre class="brush: css line-numbers language-css"><code class=" language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">repeating-radial-gradient</span><span class="token punctuation">(</span>black, black <span class="token number">5</span>px, white <span class="token number">5</span>px, white <span class="token number">10</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="line-numbers-rows"><span></span></span></code></pre>
<h2 name="See_also" id="See_also">See also</h2>
<ul>
<li>Gradient-related reference articles: <a href="/en-US/docs/Web/CSS/image" title="The <image> CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree."><code><image></code></a>, <a href="/en-US/docs/Web/CSS/gradient" title="The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to."><code><gradient></code></a>, <a href="/en-US/docs/Web/CSS/linear-gradient" title="The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size of the element it applies to."><code>linear-gradient()</code></a>, <a href="/en-US/docs/Web/CSS/radial-gradient" title="The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type."><code>radial-gradient()</code></a>, <a href="/en-US/docs/Web/CSS/repeating-linear-gradient" title="The CSS repeating-linear-gradient function creates an <image> consisting of repeating gradients. It works similarly to the basic linear gradients as described by linear-gradient(), and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first)."><code>repeating-linear-gradient()</code></a>, <a href="/en-US/docs/Web/CSS/repeating-radial-gradient" title="This works similarly to the standard radial gradients as described by radial-gradient(), but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position."><code>repeating-radial-gradient()</code></a>.</li>
</ul>
<aside class="helpful-survey" id="helpful-survey">
<p>Was this article helpful?</p>
<div class="helpful-survey-content">
<div class="helpful-survey-buttons">
<button type="button" class="helpful-survey-vote helpful-survey-yes">
<span class="offscreen">Yes</span>
<i class="icon-thumbs-o-up" aria-hidden="true"></i>
</button>
<button type="button" class="helpful-survey-vote helpful-survey-no">
<span class="offscreen">No</span>
<i class="icon-thumbs-o-down" aria-hidden="true"></i>
</button>
</div>
<div class="helpful-survey-thankyou">Thank you!</div>
</div>
</aside>
</article>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>