container-units-gradient.html (881B)
1 <!DOCTYPE html> 2 <title>Container Relative Units in gradients</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <link rel="match" href="container-units-gradient-ref.html"> 5 <style> 6 .container { 7 container-type: size; 8 width: 400px; 9 height: 300px; 10 display: flex; 11 flex-wrap: wrap; 12 } 13 .box { 14 width: 100px; 15 height: 100px; 16 margin: 5px; 17 } 18 </style> 19 <div class=container> 20 <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div> 21 <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div> 22 <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div> 23 <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div> 24 <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue);"></div> 25 </div>