Make pattern background with css3 radial gradient

We can make all kinds of beautiful patterns through the superposition of various CSS3 gradients

In CSS3. If there are multiple gradient overlays, the gradient written first will overwrite the gradient written later.

To make the plaid pattern:

code show as below:

.bg{
            width: 120px;
            height: 200px;
            background-color: #282828;
            background-image:
                    /*first row*/
                    -webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
                    /*second line*/
                    -webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
                    /*Add black edges to the two bottom edges to enhance the three-dimensional effect*/
                    -webkit-radial-gradient(black 15%,transparent 16%),
                    -webkit-radial-gradient(black 15%,transparent 16%);
            /* Gradient position for 4 gradients */
            background-position: 0 0px,8px 8px,0 1px,8px 9px;
            background-size: 16px 16px;
        }

To make a prototype cross pattern:

code show as below:

.p20{
            width: 300px;
            height: 300px;
            background:#394057;
            background-image:
                                radial-gradient(closest-side, transparent 98%,rgba(0,0,0,1) 99%),
                                radial-gradient(closest-side,transparent 98%,rgba(0,0,0,1) 99%);
            /* The upper and lower circles are staggered and intersected*/
            background-position: 0 0px,40px 40px;
            background-size: 80px 80px;
        }