| <!DOCTYPE html> | |
| <style> | |
| div { | |
| background-image: radial-gradient(red, yellow, green); | |
| background-repeat: no-repeat; | |
| border: solid 1px black; | |
| margin: 10px; | |
| } | |
| .horizontal { | |
| background-size: 100% 50%; | |
| width: 200px; | |
| height: 100px; | |
| } | |
| .vertical { | |
| background-size: 50% 100%; | |
| width: 100px; | |
| height: 200px; | |
| } | |
| </style> | |
| <div class="horizontal"> | |
| </div> | |
| <div class="vertical"> | |
| </div> |