<!DOCTYPE html>
<style>
    div {
        display: inline-block;
        zoom: 2;
        width: 100px;
        height: 100px;
    }
    #x {
        background-image: linear-gradient(blue 50%, green 50%);
    }
    #y {
        background-image: radial-gradient(circle at center, blue 50%, green 50%);
    }
</style>
You should see two squares. The first has a blue upper half part and a green bottom half part. The second has a blue circle at the center of a green box.<br>

<div id=x></div>
<div id=y></div>
