1224761-1.html (766B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { 6 border: 1px solid black; 7 width: 30px; 8 height: 30px; 9 margin: 1px; 10 } 11 .grad-5 { 12 background: linear-gradient(to right, blue -5%, yellow -5%); 13 } 14 .grad0 { 15 background: linear-gradient(to right, blue 0%, yellow 0%); 16 } 17 .grad30 { 18 background: linear-gradient(to right, blue 30%, yellow 30%); 19 } 20 .grad100 { 21 background: linear-gradient(to right, blue 100%, yellow 100%); 22 } 23 .grad150 { 24 background: linear-gradient(to right, blue 150%, yellow 150%); 25 } 26 </style> 27 </head> 28 <body> 29 You shouldn't see a gradual gradient in any of the divs below. 30 <div class="grad-5"></div> 31 <div class="grad0"></div> 32 <div class="grad30"></div> 33 <div class="grad100"></div> 34 <div class="grad150"></div> 35 </body> 36 </html>