![](CleanShot%202026-03-16%20at%2012.34.46.png)

![](CleanShot%202026-03-16%20at%2012.35.11.png)


| **Grid type** | $grid-size | $bg-size | $grid-opacity | **Gradient** |
|:-:|:-:|:-:|:-:|:-:|
| Dot grid (Moleskine) | 1px | 20px 20px | 0.06 | 1× radial |
| Fine dot grid | 1px | 5px 5px | 0.04 | 1× radial |
| Engineering paper | 1px | 4px 4px | 0.05 | 2× linear |
| Graph paper (fine) | 1px | 10px 10px | 0.06 | 2× linear |
| Graph paper (standard) | 1px | 20px 20px | 0.08 | 2× linear |
| Architectural (open) | 1px | 40px 40px | 0.12 | 2× linear |
| Engineering (major+minor) | 1px | 4px 4px + 20px 20px | 0.04 + 0.10 | 4× linear |
The last row needs four gradients — two for the minor grid at low opacity, two for the major grid at higher opacity, all stacked in one background-image declaration.
	
