JSFiddle - React, Tailwind, and code Playground

by Florence Maurice

HTML

<div title="normal"></div>
  <div title="mit Blendmodi"></div>
  <div title="mit rgba()"></div>

CSS

div {
  width: 20em;
  height: 10em;
  max-width: 90%;
  margin: 2em;
  float: left;
  border-radius: 10px;
}
div {
   background-image:
	-webkit-radial-gradient(blue 60%,transparent 60%),
	-webkit-radial-gradient(red 60%,transparent 60%)
	;
  background-image:
	radial-gradient(blue 60%,transparent 60%),
	radial-gradient(red 60%,transparent 60%)
	;
background-size: 4em 4em;
background-position: 0 0, 2em 1em
}

div:nth-child(2) {
  background-blend-mode: multiply;
}
div:nth-child(3) {
background-image:
-webkit-radial-gradient(rgba(255, 0, 0, 0.5) 60%,transparent 60%),
-webkit-radial-gradient(rgba(0, 0, 255, 0.5) 60%,transparent 60%);
background-image:
radial-gradient(rgba(255, 0, 0, 0.5) 60%,transparent 60%),
radial-gradient(rgba(0, 0, 255, 0.5) 60%,transparent 60%)
}