.circle {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left, red, blue);
clip-path: circle(50% at 50% 50%);
    }

    .ellipse {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left, red, blue);
        clip-path: ellipse(25% 50% at 50% 50%);
    }

    .inset {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left top, red, blue,pink);
        clip-path: inset(10px 20px 30px 10px round 50px 0 50px 0);
    }

    .triangle{
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(90deg, red, blue);
        clip-path: polygon(0 100%,50% 0,100% 100%)
    }
    .square{
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(90deg, red, blue);
        clip-path: polygon(0 0,0 100%,100% 100%,100% 0)
    }

    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="inset"></div>
    <div class="triangle"></div>
    <div class="square"></div>