container-units-gradient-ref.html (646B)
1 <!DOCTYPE html> 2 <style> 3 .container { 4 width: 400px; 5 height: 300px; 6 display: flex; 7 flex-wrap: wrap; 8 } 9 .box { 10 width: 100px; 11 height: 100px; 12 margin: 5px; 13 } 14 </style> 15 <div class=container> 16 <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div> 17 <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div> 18 <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div> 19 <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div> 20 <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div> 21 </div>