CSS various backgrounds

grid background

The renderings are as follows

code part

Mainly the first two lines of code, modify according to your needs

.main-container{
    
    
   background-image: linear-gradient(90deg, rgba(180, 175, 175, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(180, 175, 175, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
   background-size: 10px 10px;
   height: 100%;
   overflow: hidden;
   
 }

polka dot background

The renderings are as follows

code part

page {
    
    
   background: radial-gradient(circle at 20px 20px, #AABEFA 5px, #B7C9FB 0);
   background-size: 30px 30px;
}