How to get this background-CodePudding

Hey i have actualy this background

And i want to change it to

Actually i have this in my css

#dark-bg {
    width: 45%;
    height: 100vh;
    background-color: linear-gradient(to right, #330066, #421a9b)!important;
    float: left;
  }

#wave {
    position: relative;
    content: "";
    bottom: 0;
    width: 50%;
    height: 100vh;
    float: left;
    background: url(https://i.imgur.com/IJelEnu.png);
    background-size: contain;
    background-repeat: no-repeat;

}
body {
    background-image: linear-gradient(to right, #380774  60%, #4f30c6 )!important;
}

And in my html

    <div id="dark-bg"></div>
    <div id='wave'>
        <p></p>
    </div>

I don't want to use image (i want to remove wave image if possible) How i can do that?

CodePudding user response：

Use the image as a mask

#dark-bg {
  height: 100vh;
  width: 50%;
  background: linear-gradient(to right, #330066, #421a9b);
  -webkit-mask: 
    linear-gradient(#000 0 0) left/75% 100% no-repeat, 
    url(https://i.imgur.com/IJelEnu.png) top right/25% auto repeat-y;
}

body {
  margin: 0;
  background-image: linear-gradient(to right, #380774 60%, #4f30c6);
}

<div id="dark-bg"></div>

CodePudding user response：

I tried.... Turned out pretty good if I do say so myself :)

* {
  margin: 0;
  padding: 0;
}

#dark-bg {
        width: 50%;
        height: 100vh;
        background: linear-gradient(90deg, rgba(51,0,102,1) 15%, rgba(67,26,156,1) 90%);
        float: left;
      }

    #wave {
        position: absolute;
        content: "";
        bottom: 0;
        width: 50.06%;
        height: 100vh;
        transform: rotate(180deg);
        background: url(https://i.imgur.com/Ds3Raj2.png);
        background-size: contain;
        background-repeat: no-repeat;

    }
    body {
        background-image: linear-gradient(90deg, rgba(51,0,102,1) 54%, rgba(67,26,156,1) 90%) !important;
    }

<div id="dark-bg"></div>
        <div id='wave'>
            <p></p>
        </div>