Use CSS to make Simple Shapes & Add Shadows

The ovals shown hear are actually rectangles. Setting the border-radius property of a rectangle to half of the width / half the height creates the appearance of an oval. Similarly, setting the border-radius of a square to a width or a height will result in a circle.

#oval {
  width: 200px;
  height: 100px;
  background: #e9337c;                    
  border-radius: 100px / 50px;
} 

#circle {
  width: 100px;
  height: 100px;
  background:lightblue;
  border-radius: 50px;
}

/* NOTE: box-shadow parameters in proper order: 
  offset-x  offset-y  blur-radius  size  color */
#rect01 {
  width: 400px;
  height: 300px;
  border:2px solid #009;
  box-shadow: inset 14px 14px 20px #000000aa;
  /* bg image */
  background-image: url("https://www.gottheknack.com/a-demo/css/demo-css-shadow-inner-01/images/clouds1Pics4Lrn.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

The box-shadow has an inset option that lets you create what appears to be an inner drop-shadow. But it cannot be made too large because the inner shadow will start to appear on the other sides. Generate the appropriate code for your box-shadows then copy the code and use it; notice the Inset checkbox.

box-shadow: inset 17px 15px 48px #000;