gradient floating rotated background

by Saksham Malhotra

HTML

<div class="container"></div>

CSS

body {
  margin: 0;
}

.container {
  height: 100vh;
  background-color: #F9FFFF;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container:before,
.container:after {
  content: '';
  position: absolute;
  background-image: linear-gradient(to bottom left, #3c8221, #9bd18c);
  height: 150vh;
  width: 50%;
  border-radius: 30px;
  top: 0;
  right: 0;
}

.container:before {
  opacity: 0.4;
  transform: rotate(-25deg) translate(46%, 16%);
}

.container:after {
  transform: rotate(-31deg) translate(50%, 20%);
}