Question 175600 in CSS Question posted in
Some basic documentation can be found here.

Can linear gradient be used to create a polka dot texture in CSS?

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.

Tags:

2

Answers


  1. 0 
    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%;
}
    Login or Signup to reply.
  2. 0

    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; /* your gradient not here, gets default values */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search