Can someone show me how to create dotted background with linear gradient at same time. And also if possible to group dots in small squares

This is gradient: linear-gradient(to bottom right, #294A77, #8986A5); and $dot-color: #606685;

And i tried : https://codetea.com/a-simple-technique-to-create-a-dot-pattern-or-dot-grid-background/ but unsuccessful.

Solution

For dots, maybe a radial-gradient() would be more what ou look for . background-blend-mode can also help to hide some of your dots and then blend colors with the main gradient from left to right drawing your background.

here is an example you could inspire yourself from :

html {/*for demo  it can be here any block level html tag */
  height: 100%;

             /* your groups of dots */

  background: 
    linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
      to left, 
      #8382a2, 
      #2f4e79),
    repeating-linear-gradient( /* horizontal white lines hidding a row of dots */
      to bottom,
      transparent 0,
      transparent 32px,
      white 32px,
      white 40px,
      transparent 40px
    ),
    repeating-linear-gradient( /* vertical lines hidding a col of dots */
      to right,
      transparent 0,
      transparent 32px,
      white 32px,
      white 40px,
      transparent 40px
    ),
    radial-gradient( /* dot repeated via background-size */
        circle at 5px 5px,
        #2f4e79 1px,
        transparent 2px,
        transparent 8px
      )
      0 0 / 8px 8px /*position + /  background-size here */;
      
  background-blend-mode: 
      multiply, /* only blend the first layer to keep dots hidden */
      normal, 
      normal, 
      normal;
               /* end dot group */
}

size and colors are yours to update .

Codepen to play with : https://codepen.io/gc-nomade/pen/Yzwowpg