<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.grid > div {
  height: 200px;
}
.grid > div:nth-child(1) {
  background: repeating-radial-gradient(
    circle at 100%,
    #333,
    #333 10px,
    #999 10px,
    #999 20px
  );
}

.grid > div:nth-child(2) {
  background-image: radial-gradient(#90caf9 20%, transparent 20%),
    radial-gradient(#1e88e5 20%, transparent 20%);
  background-color: #64b5f6;
  background-position: top left, 50px 50px;
  background-size: 100px 100px;
}

.grid > div:nth-child(3) {
  background-image: radial-gradient(
    circle at top left,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}

.grid > div:nth-child(4) {
  background: repeating-radial-gradient(
    circle at bottom right,
    #eee,
    #ccc 50px
  );
}

body {
  margin: 2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.