<div class="element"></div>
body {
  height: 100vh;
  margin: 0;
  background: #246756;
}

.element {
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(
      farthest-side at bottom left,
      rgba(255, 0, 255, 0.5), 
      transparent
    ),
    radial-gradient(
      farthest-corner at bottom right,
      rgba(255, 50, 50, 0.5), 
      transparent 400px
    );
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.