How to reduce gradient pattern to less code

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);

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;
 }

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.

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?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.