Making a Dotted Grid with CSS

Making a dotted grid with CSS

Update

The following solution works, but only for a fixed background-size. See @Temani Afif's answer for a better solution.

Answer

You can use the background-position CSS property to do exactly what you were thinking.

body {  background: white;  background-image: radial-gradient(black 1px, transparent 0);  background-size: 40px 40px;  background-position: -19px -19px;}

How to create a Dotted Grid/Graph Sheet background using css?

I think a simple radial-gradient can help you, especially to avoid a ton of repetitions in the code

body {   background      : radial-gradient(#000 4px, transparent 5px);   background-size : 50px 50px;}

dotted background with pure html/css

.dotted {
height:500px;
width:500px;
  background-image: radial-gradient(#ccc 10%, transparent 10%),
      radial-gradient(#ccc 10%, transparent 10%);
  background-color: #fff;
  background-position: 0 0, 50px 50px;
  background-size: 50px 50px;
}

<div class='dotted'></div>

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

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 */
}

How to make a grid (like graph paper grid) with just CSS?

Since you mentioned lined paper:

div {  background-color: #fff;  background-size: 100% 1.2em;  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;  behavior: url(/PIE.htc);}

<div style="width: 200px; height: 200px"></div>

Create leading dots in CSS

Taken from this article on Leader Dots with CSS:

The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.

Here is the CSS:
.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 
To apply this to the example form, you would just use it as:
<div class="dots">
    <span class="field">LastName</span>
</div>

Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png

Demo in Stack Snippets

.dots {   background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom; }.field {  background-color: #FFFFFF;}.link {  width: 150px;  display: inline-block;}

<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 1  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 2  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 3  </span></div>

Making a Dotted Grid with CSS