JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="canvas">
  
  <div class="parasol"></div>
  
</div>

CSS

.canvas {
  width: 700px;
  height: 600px;
  margin: 5rem auto 0;
  border: 1px solid;
  
  
  /*SAMPLE*/
/*   background: linear-gradient(60deg, firebrick 62%, transparent 63%) 50% 20% / 8em 8em,
  radial-gradient(100% 100% at center, orange 49%, blue 50%) 100% 80% / 8em 8em; */
  
  
  
  
  background-repeat: no-repeat;
}


.parasol {
  width: 480px; 
  height: 464px;
  font-size: 10px;
  outline: 1px solid;
  

  
 --red: rgb(255,40,40);
 --red-transparent: rgba(255,40,40,0);

 --white: rgb(240,240,240);
 --white-transparent: rgba(240,240,240,0);

 --orange: rgb(255,180,70);
 --orange-transparent: rgba(255,180,70,0);

 --dark-orange: rgb(232,144,0);
 --dark-orange-transparent: rgba(232,144,0,0);
  
  
  background: radial-gradient(200% 200% at 100% 100%, var(--dark-orange) 49%, var(--dark-orange-transparent) 50%) 14em 0 / 1em 1em;
  
  
    background-repeat: no-repeat;
}