1# Gradient Styles<a name="EN-US_TOPIC_0000001115974726"></a> 2 3- [Linear Gradient/Repeating Linear Gradient](#en-us_topic_0000001058948919_s9fb0b2412d2843e4b06e05acc39dc394) 4 5Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors. 6 7This framework supports two gradient styles: linear gradient and repeating linear gradient. 8 9## Linear Gradient/Repeating Linear Gradient<a name="en-us_topic_0000001058948919_s9fb0b2412d2843e4b06e05acc39dc394"></a> 10 11To use the gradient style, you need to specify the transition direction and transition color. 12 131. Transition direction: specified by **direction** or **angle**. 14 15 - **direction**: gradient by direction 16 - **angle**: gradient by angle 17 18 ``` 19 background: linear-gradient(direction/angle, color, color, ...); 20 background: repeating-linear-gradient(direction/angle, color, color, ...); 21 ``` 22 232. Transition color: \#ff0000, \#ffff0000, rgb \(255, 0, 0\), and rgba \(255, 0, 0, 1\). At least two colors must be specified. 24 25- Parameters 26 27 <a name="en-us_topic_0000001058948919_tbec24098117142bc8e59e180f6a2cbed"></a> 28 <table><thead align="left"><tr id="en-us_topic_0000001058948919_r74a4b97fb46b429ab94909799d5aa057"><th class="cellrowborder" valign="top" width="13.13131313131313%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948919_a7a35c17dc8684775a8d4ce9fa2498b53"><a name="en-us_topic_0000001058948919_a7a35c17dc8684775a8d4ce9fa2498b53"></a><a name="en-us_topic_0000001058948919_a7a35c17dc8684775a8d4ce9fa2498b53"></a>Name</p> 29 </th> 30 <th class="cellrowborder" valign="top" width="29.292929292929294%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058948919_ae1621e9d7be54b608b04d6e59e386fa8"><a name="en-us_topic_0000001058948919_ae1621e9d7be54b608b04d6e59e386fa8"></a><a name="en-us_topic_0000001058948919_ae1621e9d7be54b608b04d6e59e386fa8"></a>Type</p> 31 </th> 32 <th class="cellrowborder" valign="top" width="14.14141414141414%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058948919_a58edb9b081d74f8aaeecee41af5f8a11"><a name="en-us_topic_0000001058948919_a58edb9b081d74f8aaeecee41af5f8a11"></a><a name="en-us_topic_0000001058948919_a58edb9b081d74f8aaeecee41af5f8a11"></a>Default Value</p> 33 </th> 34 <th class="cellrowborder" valign="top" width="9.09090909090909%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058948919_a69d42c9602a0464eb484093c6cb89261"><a name="en-us_topic_0000001058948919_a69d42c9602a0464eb484093c6cb89261"></a><a name="en-us_topic_0000001058948919_a69d42c9602a0464eb484093c6cb89261"></a>Mandatory</p> 35 </th> 36 <th class="cellrowborder" valign="top" width="34.34343434343434%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058948919_a55bc093362f04d8dbcb4343d3e80f940"><a name="en-us_topic_0000001058948919_a55bc093362f04d8dbcb4343d3e80f940"></a><a name="en-us_topic_0000001058948919_a55bc093362f04d8dbcb4343d3e80f940"></a>Description</p> 37 </th> 38 </tr> 39 </thead> 40 <tbody><tr id="en-us_topic_0000001058948919_rdbe9ecbd3a3442b48d39860444d96cf8"><td class="cellrowborder" valign="top" width="13.13131313131313%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948919_a963cbdb8589b42b785dd1fa4892839bb"><a name="en-us_topic_0000001058948919_a963cbdb8589b42b785dd1fa4892839bb"></a><a name="en-us_topic_0000001058948919_a963cbdb8589b42b785dd1fa4892839bb"></a>direction</p> 41 </td> 42 <td class="cellrowborder" valign="top" width="29.292929292929294%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948919_ab54d4ccb681c46f7bcc4e5d702fc8b30"><a name="en-us_topic_0000001058948919_ab54d4ccb681c46f7bcc4e5d702fc8b30"></a><a name="en-us_topic_0000001058948919_ab54d4ccb681c46f7bcc4e5d702fc8b30"></a>to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]</p> 43 </td> 44 <td class="cellrowborder" valign="top" width="14.14141414141414%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948919_a52342ab36286439b89baabf1b7a0096f"><a name="en-us_topic_0000001058948919_a52342ab36286439b89baabf1b7a0096f"></a><a name="en-us_topic_0000001058948919_a52342ab36286439b89baabf1b7a0096f"></a>to bottom (gradient from top to bottom)</p> 45 </td> 46 <td class="cellrowborder" valign="top" width="9.09090909090909%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948919_a92b9128925dc4acdbef5bfaf6af1b93d"><a name="en-us_topic_0000001058948919_a92b9128925dc4acdbef5bfaf6af1b93d"></a><a name="en-us_topic_0000001058948919_a92b9128925dc4acdbef5bfaf6af1b93d"></a>No</p> 47 </td> 48 <td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948919_a1351d071b6d54f7084bdc7e4f15c7e72"><a name="en-us_topic_0000001058948919_a1351d071b6d54f7084bdc7e4f15c7e72"></a><a name="en-us_topic_0000001058948919_a1351d071b6d54f7084bdc7e4f15c7e72"></a>Transition direction. For example, <strong id="en-us_topic_0000001058948919_b9784809451"><a name="en-us_topic_0000001058948919_b9784809451"></a><a name="en-us_topic_0000001058948919_b9784809451"></a>to right</strong> (gradient from left to right) or</p> 49 <p id="en-us_topic_0000001058948919_a8146911b819748f0890e86cdf0fecc20"><a name="en-us_topic_0000001058948919_a8146911b819748f0890e86cdf0fecc20"></a><a name="en-us_topic_0000001058948919_a8146911b819748f0890e86cdf0fecc20"></a><strong id="en-us_topic_0000001058948919_b144311914164519"><a name="en-us_topic_0000001058948919_b144311914164519"></a><a name="en-us_topic_0000001058948919_b144311914164519"></a>to bottom right</strong> (from the top left to the bottom right).</p> 50 </td> 51 </tr> 52 <tr id="en-us_topic_0000001058948919_r6cdda990326c445283ef0188ad38a764"><td class="cellrowborder" valign="top" width="13.13131313131313%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948919_ada09dad6eade41edaa02a6a85e32b884"><a name="en-us_topic_0000001058948919_ada09dad6eade41edaa02a6a85e32b884"></a><a name="en-us_topic_0000001058948919_ada09dad6eade41edaa02a6a85e32b884"></a>angle</p> 53 </td> 54 <td class="cellrowborder" valign="top" width="29.292929292929294%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948919_ad9728bbfb4304c148051212f59c32096"><a name="en-us_topic_0000001058948919_ad9728bbfb4304c148051212f59c32096"></a><a name="en-us_topic_0000001058948919_ad9728bbfb4304c148051212f59c32096"></a><deg></p> 55 </td> 56 <td class="cellrowborder" valign="top" width="14.14141414141414%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948919_ac59bbfd4b50c44e8be93a9c8fb1039d0"><a name="en-us_topic_0000001058948919_ac59bbfd4b50c44e8be93a9c8fb1039d0"></a><a name="en-us_topic_0000001058948919_ac59bbfd4b50c44e8be93a9c8fb1039d0"></a>180deg</p> 57 </td> 58 <td class="cellrowborder" valign="top" width="9.09090909090909%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948919_ae6853c652f2c414b8b2eee535d838115"><a name="en-us_topic_0000001058948919_ae6853c652f2c414b8b2eee535d838115"></a><a name="en-us_topic_0000001058948919_ae6853c652f2c414b8b2eee535d838115"></a>No</p> 59 </td> 60 <td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948919_a88b591f082704070b5b802aa11442816"><a name="en-us_topic_0000001058948919_a88b591f082704070b5b802aa11442816"></a><a name="en-us_topic_0000001058948919_a88b591f082704070b5b802aa11442816"></a>Transition direction. Angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.</p> 61 </td> 62 </tr> 63 <tr id="en-us_topic_0000001058948919_r5f48e6c55e0c44b7adb0bb77eb12ce04"><td class="cellrowborder" valign="top" width="13.13131313131313%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948919_a8aba9a5fa61b4a9ab6eaaa0b840cd463"><a name="en-us_topic_0000001058948919_a8aba9a5fa61b4a9ab6eaaa0b840cd463"></a><a name="en-us_topic_0000001058948919_a8aba9a5fa61b4a9ab6eaaa0b840cd463"></a>color</p> 64 </td> 65 <td class="cellrowborder" valign="top" width="29.292929292929294%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948919_a1402dc10b0c940b799d3330682496908"><a name="en-us_topic_0000001058948919_a1402dc10b0c940b799d3330682496908"></a><a name="en-us_topic_0000001058948919_a1402dc10b0c940b799d3330682496908"></a><color> [<length>|<percentage>]</p> 66 </td> 67 <td class="cellrowborder" valign="top" width="14.14141414141414%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948919_a630e796e57164b71aa934fc8bcc87455"><a name="en-us_topic_0000001058948919_a630e796e57164b71aa934fc8bcc87455"></a><a name="en-us_topic_0000001058948919_a630e796e57164b71aa934fc8bcc87455"></a>-</p> 68 </td> 69 <td class="cellrowborder" valign="top" width="9.09090909090909%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948919_a81076bc36e3c4674b5186aee26a0ae73"><a name="en-us_topic_0000001058948919_a81076bc36e3c4674b5186aee26a0ae73"></a><a name="en-us_topic_0000001058948919_a81076bc36e3c4674b5186aee26a0ae73"></a>Yes</p> 70 </td> 71 <td class="cellrowborder" valign="top" width="34.34343434343434%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948919_a36325f0de58d4db6bf1c35678a0d8e70"><a name="en-us_topic_0000001058948919_a36325f0de58d4db6bf1c35678a0d8e70"></a><a name="en-us_topic_0000001058948919_a36325f0de58d4db6bf1c35678a0d8e70"></a>Colors among which smooth transitions are rendered.</p> 72 </td> 73 </tr> 74 </tbody> 75 </table> 76 77- Example: 78 79 ``` 80 #gradient { 81 height: 300px; 82 width: 600px; 83 } 84 ``` 85 86 **Figure 1** Gradient from top to bottom \(default\)<a name="en-us_topic_0000001058948919_fd4af6346567d40febe33cb89b27cb797"></a> 87 .png "gradient-from-top-to-bottom-(default)") 88 89 ``` 90 /* Gradient starts from red at the top to green at the bottom. */ 91 background: linear-gradient(red, #00ff00); 92 ``` 93 94 **Figure 2** Gradient at an angle of 45°<a name="en-us_topic_0000001058948919_f2d14c573ff20422fa206c381b7e50a56"></a> 95  96 97 ``` 98 /* Gradient at an angle of 45°, changing from red to green */ 99 background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); 100 ``` 101 102 **Figure 3** Gradient from left to right<a name="en-us_topic_0000001058948919_fdd5bac2f37d14ab6b9dd68cdc40df08c"></a> 103  104 105 ``` 106 /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ 107 background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%); 108 ``` 109 110 **Figure 4** Repeating gradient from left to right<a name="en-us_topic_0000001058948919_fb33af9507d004041ba9394434e73a7c9"></a> 111  112 113 ``` 114 /* Repeating gradient from left to right, the area of which is 30 px (60-30) and the transparency is 0.5 */ 115 background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); 116 ``` 117 118 119
