10 Amazing Background Textures with CSS

Hira Ansari | October 7, 2022

Hi, I have created all these textures or pattern designs with 100% CSS without any image file. These backgrounds with help your website to look beutiful withou compromizing page speed. To use these backgrounds copy the code and paste it in your relevant html tag for example body for whole body background.

Kindly feel free to ask me in comment section if you need any help in implementation or color cange.

And stay in the loop, because I am soon going to share another 10 more advanced and complex CSS background designs.

Till then enjoy your code.

Hira Ansari

1. Threaded

background-blend-mode: multiply;
background-repeat: repeat;
background-size: contain;
background-attachment: fixed;
background-color: #bb9c52;
background-image: 
repeating-linear-gradient(45deg, #9373257d, transparent 2px), 
repeating-linear-gradient(135deg, #9373257d, transparent 2px),
repeating-linear-gradient(90deg, #9373257d, transparent 2px),
repeating-linear-gradient(180deg, #9373257d, transparent 2px);

2. Wood Texture

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 120px 40px;
background-color: #9ddfff;
background-image: 
repeating-radial-gradient(#fdfdfd, transparent 82px), 
repeating-radial-gradient(#f6e911, transparent 3px),
repeating-radial-gradient(#f5f5f5, transparent 3px);

3. Fabric Print -1

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 120px 30px;
background-color: #607d8b;
background-image: 
repeating-radial-gradient(#000000, transparent 1px), 
repeating-radial-gradient(#40c4ff, transparent 20px),
repeating-radial-gradient(#f5f5f5, transparent 3px);

4. Cubic - 1

background-blend-mode: multiply;
background-repeat: repeat;
background-size: contain;
background-attachment: fixed;
background-image: 
repeating-linear-gradient(44deg, #7a5a0d54, transparent 30px), 
repeating-linear-gradient(-45deg, #7a5a0d5c, transparent 30px),
repeating-linear-gradient(90deg, #7a5a0d5c, transparent 30px),
repeating-linear-gradient(135deg, #7a5a0d5c, transparent 30px);
background-color: #bb9c52;

5. Fabric Print 2

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 45px 30px;
background-image: 
repeating-radial-gradient(#ffffff, #607d8b00 45px),
repeating-radial-gradient(#5ea59800, transparent 2px),
repeating-radial-gradient(#000000, transparent 1px),
repeating-radial-gradient(#ad64ff, #607d8b00 45px);
background-color: #ffffff;

6. Fabric Print 3

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 35px 30px;
background-image: 
repeating-radial-gradient(#82c8ff, #607d8b00 30px),
repeating-radial-gradient(#5ea598, transparent 2px),
repeating-radial-gradient(#ff0000, transparent 1px),
repeating-radial-gradient(#d1aafd, #607d8b00 30px);
background-color: #ffffff;

7. Circles 1

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 130px 130px;
background-image: 
repeating-radial-gradient(#078af2, #607d8b00 10px),
repeating-radial-gradient(#034610, transparent 6px),
repeating-radial-gradient(#620404, transparent 3px),
repeating-radial-gradient(#9f4dfd, #607d8b00 20px);
background-color: #cddc394a;

8. Circles 2

background-blend-mode: multiply;
background-repeat: repeat;
background-size: 50px 50px;
background-image: 
repeating-radial-gradient(#00000021, #81d113a3 10px);
background-color: #ffffff;

9. Background Texture

background-blend-mode: darken;
background-repeat: repeat;
background-size: 130px 70px;
background-color: #607d8b;
background-image: 
repeating-radial-gradient(#ffd8d8, transparent 6px), 
repeating-radial-gradient(#021536, transparent 0.1px);

10. Threaded 2

background-color: #110101;
background-image: 
repeating-linear-gradient(45deg, #02020299, transparent 1px), 
repeating-linear-gradient(-45deg, #947b3f99, transparent 1px);