| <!DOCTYPE html> |
| <style> |
| .container { |
| width: 400px; |
| height: 300px; |
| display: flex; |
| flex-wrap: wrap; |
| } |
| .box { |
| width: 100px; |
| height: 100px; |
| margin: 5px; |
| } |
| </style> |
| <div class=container> |
| <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div> |
| <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div> |
| <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div> |
| <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div> |
| <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div> |
| </div> |