<!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>