<div class="circle-1">
  <p>Praesent nec erat urna. Integer feugiat vel libero id porta. Aenean elementum lectus vitae est fringilla iaculis. Nulla aliquet sem pulvinar.</p>
</div>

<div class="circle-2">
  <p>Suspendisse eros augue, gravida sed interdum at, laoreet vel sem. Pellentesque auctor hendrerit, sit amet interdum nisl aliquam. Nunc vel porttitor augue.</p>
</div>

<div class="circle-3">
  <p>Integer ultrices a nulla sit amet aliquet. Praesent quis gravida turpis. Donec viverra venenatis pulvinar. Sed ut luctus mauris, in pulvinar turpis. Donec sodales velit consequat.</p>
</div>

.circle-1,
.circle-2,
.circle-3 {
  color: #fff;
  padding: 5%;
  width: 180px;
  height: 180px;
  margin: 0 -15px;
  mix-blend-mode: multiply;
}
.circle-1 {
  background: #f66;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.circle-2 {
  background: #f92;
  border-radius: 80% 30% 50% 50%/50%;
}
.circle-3 {
  background: #fc2;
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}

body {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #ffd;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
}