How to reduce gradient pattern to less code

[javascriptcoding5678]

To have 4 colors in the middle like this, what would this part of the code be changed to?

linear-gradient(to bottom, teal 85px, #0000 85px),
linear-gradient(to top, teal 85px, #0000 85px);

https://jsfiddle.net/5k94s01b/

I have not been able to figure out how to do it.

background-image:

    linear-gradient(to bottom, teal 5px, #0000 5px),
    linear-gradient(to left, teal 5px, #0000 5px),
    linear-gradient(to top, teal 5px, #0000 5px),
    linear-gradient(to right, teal 5px, #0000 5px),

    linear-gradient(to bottom, black 10px, #0000 10px),
    linear-gradient(to left, black 10px, #0000 10px),
    linear-gradient(to top, black 10px, #0000 10px),
    linear-gradient(to right, black 10px, #0000 10px),

    linear-gradient(to bottom, orange 15px, #0000 15px),
    linear-gradient(to left, orange 15px, #0000 15px),
    linear-gradient(to top, orange 15px, #0000 15px),
    linear-gradient(to right, orange 15px, #0000 15px),

    linear-gradient(to bottom, black 20px, #0000 20px),
    linear-gradient(to left, black 20px, #0000 20px),
    linear-gradient(to top, black 20px, #0000 20px),
    linear-gradient(to right, black 20px, #0000 20px),

    linear-gradient(to bottom, teal 25px, #0000 25px),
    linear-gradient(to left, teal 25px, #0000 25px),
    linear-gradient(to top, teal 25px, #0000 25px),
    linear-gradient(to right, teal 25px, #0000 25px),
    
    linear-gradient(to bottom, black 30px, #0000 30px),
    linear-gradient(to left, black 30px, #0000 30px),
    linear-gradient(to top, black 30px, #0000 30px),
    linear-gradient(to right, black 30px, #0000 30px),
    
    linear-gradient(to bottom, orange 35px, #0000 35px),
    linear-gradient(to left, orange 35px, #0000 10px),
    linear-gradient(to top, orange 35px, #0000 35px),
    linear-gradient(to right, orange 35px, #0000 35px),

    linear-gradient(to bottom, black 40px, #0000 40px),
    linear-gradient(to left, black 40px, #0000 40px),
    linear-gradient(to top, black 40px, #0000 40px),
    linear-gradient(to right, black 40px, #0000 40px),

    linear-gradient(to bottom, teal 45px, #0000 45px),
    linear-gradient(to left, teal 45px, #0000 45px),
    linear-gradient(to top, teal 45px, #0000 45px),
    linear-gradient(to right, teal 45px, #0000 45px),

    linear-gradient(to bottom, black 50px, #0000 50px),
    linear-gradient(to left, black 50px, #0000 10px),
    linear-gradient(to top, black 50px, #0000 50px),
    linear-gradient(to right, black 50px, #0000 50px),
    
    linear-gradient(to bottom, orange 55px, #0000 55px),
    linear-gradient(to left, orange 55px, #0000 10px),
    linear-gradient(to top, orange 55px, #0000 55px),
    linear-gradient(to right, orange 55px, #0000 55px),
    
    linear-gradient(to bottom, black 60px, #0000 60px),
    linear-gradient(to left, black 60px, #0000 60px),
    linear-gradient(to top, black 60px, #0000 60px),
    linear-gradient(to right, black 60px, #0000 60px),

    linear-gradient(to bottom, teal 65px, #0000 65px),
    linear-gradient(to left, teal 65px, #0000 65px),
    linear-gradient(to top, teal 65px, #0000 65px),
    linear-gradient(to right, teal 65px, #0000 65px),

    linear-gradient(to bottom, black 70px, #0000 70px),
    linear-gradient(to left, black 70px, #0000 70px),
    linear-gradient(to top, black 70px, #0000 70px),
    linear-gradient(to right, black 70px, #0000 70px),
    
    linear-gradient(to bottom, orange 75px, #0000 75px),
    linear-gradient(to left, orange 75px, #0000 75px),
    linear-gradient(to top, orange 75px, #0000 75px),
    linear-gradient(to right, orange 75px, #0000 75px),

    linear-gradient(to bottom, black 80px, #0000 80px),
    linear-gradient(to left, black 80px, #0000 80px),
    linear-gradient(to top, black 80px, #0000 80px),
    linear-gradient(to right, black 80px, #0000 80px),

    linear-gradient(to bottom, teal 85px, #0000 85px),
    linear-gradient(to top, teal 85px, #0000 85px);

[javascriptcoding5678]

I’m trying to reduce the size of this code the gradient pattern is using, is there a way to do that?

Can the code be written in a way that uses less code?

https://jsfiddle.net/g3do25pw/

 body {
   background-image:
     linear-gradient(to bottom, teal 5px, #0000 5px),
     linear-gradient(to right, teal 5px, #0000 5px),

     linear-gradient(to bottom, black 10px, #0000 10px),
     linear-gradient(to left, black 5px, #0000 5px),
     linear-gradient(to top, black 5px, #0000 5px),
     linear-gradient(to right, black 10px, #0000 10px),

     linear-gradient(to bottom, orange 15px, #0000 15px),
     linear-gradient(to left, orange 10px, #0000 10px),
     linear-gradient(to top, orange 10px, #0000 10px),
     linear-gradient(to right, orange 15px, #0000 15px),

     linear-gradient(to bottom, black 20px, #0000 20px),
     linear-gradient(to left, black 15px, #0000 15px),
     linear-gradient(to top, black 15px, #0000 15px),
     linear-gradient(to right, black 20px, #0000 20px),

     linear-gradient(to bottom, teal 25px, #0000 25px),
     linear-gradient(to left, teal 20px, #0000 20px),
     linear-gradient(to top, teal 20px, #0000 20px),
     linear-gradient(to right, teal 25px, #0000 25px),

     linear-gradient(to bottom, black 30px, #0000 30px),
     linear-gradient(to left, black 25px, #0000 25px),
     linear-gradient(to top, black 25px, #0000 25px),
     linear-gradient(to right, black 30px, #0000 30px),

     linear-gradient(to bottom, orange 35px, #0000 35px),
     linear-gradient(to left, orange 30px, #0000 30px),
     linear-gradient(to top, orange 30px, #0000 30px),
     linear-gradient(to right, orange 35px, #0000 35px),

     linear-gradient(to bottom, black 40px, #0000 40px),
     linear-gradient(to left, black 35px, #0000 35px),
     linear-gradient(to top, black 35px, #0000 35px),
     linear-gradient(to right, black 40px, #0000 40px),

     linear-gradient(to bottom, teal 45px, #0000 45px),
     linear-gradient(to left, teal 40px, #0000 40px),
     linear-gradient(to top, teal 40px, #0000 40px),
     linear-gradient(to right, teal 45px, #0000 45px),

     linear-gradient(to bottom, black 50px, #0000 50px),
     linear-gradient(to left, black 45px, #0000 45px),
     linear-gradient(to top, black 45px, #0000 45px),
     linear-gradient(to right, black 50px, #0000 50px),

     linear-gradient(to bottom, orange 55px, #0000 55px),
     linear-gradient(to left, orange 50px, #0000 50px),
     linear-gradient(to top, orange 50px, #0000 50px),
     linear-gradient(to right, orange 55px, #0000 55px),

     linear-gradient(to bottom, black 60px, #0000 60px),
     linear-gradient(to left, black 55px, #0000 55px),
     linear-gradient(to top, black 55px, #0000 55px),
     linear-gradient(to right, black 60px, #0000 60px),

     linear-gradient(to bottom, teal 65px, #0000 65px),
     linear-gradient(to left, teal 60px, #0000 60px),
     linear-gradient(to top, teal 60px, #0000 60px),
     linear-gradient(to right, teal 65px, #0000 65px),

     linear-gradient(to bottom, black 70px, #0000 70px),
     linear-gradient(to left, black 65px, #0000 65px),
     linear-gradient(to top, black 65px, #0000 65px),
     linear-gradient(to right, black 70px, #0000 70px),

     linear-gradient(to bottom, orange 75px, #0000 75px),
     linear-gradient(to left, orange 70px, #0000 70px),
     linear-gradient(to top, orange 70px, #0000 70px),
     linear-gradient(to right, orange 75px, #0000 75px),

     linear-gradient(to bottom, black 80px, #0000 80px),
     linear-gradient(to left, black 75px, #0000 75px),
     linear-gradient(to top, black 75px, #0000 75px),
     linear-gradient(to right, black 80px, #0000 80px),

     linear-gradient(to bottom, teal 85px, #0000 85px),
     linear-gradient(to left, teal 85px, #0000 85px);
   background-size: 165px 165px;
 }

[seekinfox]

do you want to do this only using gradient? or any method is fine ?
any different approach , completely different and easy.
it will not create any color pattern .
just like copy/ paste.

[javascriptcoding5678]

What are all the ways it can be done including gradient?

No png/jpeg images though.

Let’s start with gradient first.

How can the gradient pattern code use less code?