JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body { 
   font-family:  sans-serif;
    background: #EBE6C8;
   padding: 20px;
}
div {
  height: 200px;
  width: 250px;
  float: left;
  margin: 10px;
}

/* box-shadow und linear-gradient im Vergleich */
div:nth-child(1) {
  background: #040707;
  background: -webkit-linear-gradient(#fff 30%, #040707 30%, #ff00ff 40%);
  background: linear-gradient(#fff 50%, #040707 50%, #ff00ff 40%);
}
div:nth-child(2) { 
  background-color: #040707 ;
  -webkit-box-shadow: 0px 100px #fff inset;
  box-shadow:   0px 100px #fff inset;
}
div:nth-child(3) {
  clear: left;
  border-radius: 50%;
  background-color: #040707 ;
  background-image: -webkit-linear-gradient(#fff 50%, #040707 50%);
  background-image: linear-gradient(#fff 50%, #040707 50%);
}
div:nth-child(4) {
  border-radius: 50%;
  background-color: #040707 ;
  -webkit-box-shadow:   0px 100px #fff inset;
  box-shadow:   0px 100px #fff inset;
  
}
div:nth-child(5) {
  border-radius: 50%;
  background-color:  #fff;
  -webkit-box-shadow:   0px -100px #040707 inset;
  box-shadow:   0px -100px #040707 inset;
  
}