The easiest way to draw a pattern in CSS for linear-gradient that produces squares, is to think of triangles. A linear gradient that starts in a corner and stops at a certain percentage is doable. But a linear vertical or horizontal gradient cannot be controlled in both directions, only one. So visually, if I want to create this pattern:
![css pattern](https://cdn.sanity.io/images/96ughm6r/sekrabbin/4df312c4ea06fe149aedd8d0324c855507c85ecc-626x623.png)
Modeling looks like this, the circle radials are easy to produce, but the squares are tougher.
![Pattern model](https://cdn.sanity.io/images/96ughm6r/sekrabbin/698bfcf3903c8b28376d64cdfc68456499b0acbb-1410x701.png)
So triangles (I choose this because it's the simplest but the options are unlimited)
![Pattern broken to triangles](https://cdn.sanity.io/images/96ughm6r/sekrabbin/55bfc0256d6a205e071126efce579e51a08f3d3f-507x481.png)
And the result is in CodePen