How to create a polka dot texture with linear gradient as background in css?

Question

Here is a gradient background:

body {
  background: linear-gradient(to right, red , yellow);
}

and here is the polka dot css:

body {
  background-color: #94fcc8;
  opacity: 1;
  background-image:  radial-gradient(#7c7c50 0.9500000000000001px, transparent 0.9500000000000001px), radial-gradient(#7c7c50 0.9500000000000001px, #94fcc8 0.9500000000000001px);
  background-size: 38px 38px;
  background-position: 0 0,19px 19px;
}

how do I somehow merge it together?

here is the codepen: https://codepen.io/danichk/pen/YyVeXa

Thanks in advance.

Answer 1

As commented

background-image accepts a comma-delimited list of images/gradients, as do the background-.. and ..-blend-mode properties. Order of the values does matter...

snippet

body {
  background: wheat;

  background-image: radial-gradient(salmon 20%, transparent 0), /* polka dots */
                    radial-gradient(salmon 20%, transparent 0),
                    linear-gradient(to right, red , yellow); /* your gradient */

  background-size: 30px 30px, /* polka dots */
                   30px 30px,
                   100% 100%; /* your gradient */

  background-position: 0 0, 15px 15px;
  /* Without a 3rd set of values, the 3rd gradient
     will default to the first set of values (0 0) */
}

Answer 2

html {
  --g:/30px 30px radial-gradient(salmon 20%, #0000 0);
  background:
    0 0 var(--g),15px 15px var(--g),
    linear-gradient(45deg,red,blue);
  min-height: 100%;
}