Reducing gradient pattern to less code

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/3dn245uh/

 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 left, teal 85px, #0000 85px);
   background-size: 165px 165px;
 }

I don’t know if this is what you’re looking for, but simply saving that pattern as a .gif file will not only be smaller but generate less computing resource in all the browsers it’s displayed in.

2 Likes

I wanted to keep it a gradient, just reduce how big the code is.

I don’t have any great ideas then, sorry

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