Repeating a gradient

HTML & CSS
21

I’m going to modify it and try to get as far I can.

First organize the code.
https://jsfiddle.net/7s80jd64/

linear-gradient(to right, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 0.33em, rgba(255, 255, 255, 0) 0.33em) 0 0, 

linear-gradient(to top, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 0.33em, rgba(255, 255, 255, 0) 0.33em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 0.33em, rgba(255, 255, 255, 0) 0.33em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 0.66em, rgba(255, 255, 255, 0) 0.66em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 0.33em, rgba(255, 255, 255, 0) 0.33em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 0.66em, rgba(255, 255, 255, 0) 0.66em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 0.66em, rgba(255, 255, 255, 0) 0.66em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 0.99em, rgba(255, 255, 255, 0) 0.99em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 0.66em, rgba(255, 255, 255, 0) 0.66em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 0.99em, rgba(255, 255, 255, 0) 0.99em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 0.99em, rgba(255, 255, 255, 0) 0.99em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 1.32em, rgba(255, 255, 255, 0) 1.32em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 0.99em, rgba(255, 255, 255, 0) 0.99em) 0 0, 

linear-gradient(to top, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 1.32em, rgba(255, 255, 255, 0) 1.32em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 1.32em, rgba(255, 255, 255, 0) 1.32em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 1.65em, rgba(255, 255, 255, 0) 1.65em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 1.32em, rgba(255, 255, 255, 0) 1.32em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 1.65em, rgba(255, 255, 255, 0) 1.65em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 1.65em, rgba(255, 255, 255, 0) 1.65em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 1.98em, rgba(255, 255, 255, 0) 1.98em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 1.65em, rgba(255, 255, 255, 0) 1.65em) 0 0, 

linear-gradient(to top, rgba(255, 255, 255, 0) 0, #36B1BF 0, #36B1BF 1.98em, rgba(255, 255, 255, 0) 1.98em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 1.98em, rgba(255, 255, 255, 0) 1.98em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 2.31em, rgba(255, 255, 255, 0) 2.31em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 1.98em, rgba(255, 255, 255, 0) 1.98em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #4AD9D9 0, #4AD9D9 2.31em, rgba(255, 255, 255, 0) 2.31em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 2.31em, rgba(255, 255, 255, 0) 2.31em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 2.64em, rgba(255, 255, 255, 0) 2.64em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 2.31em, rgba(255, 255, 255, 0) 2.31em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #E9F1DF 0, #E9F1DF 2.64em, rgba(255, 255, 255, 0) 2.64em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 2.64em, rgba(255, 255, 255, 0) 2.64em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 2.97em, rgba(255, 255, 255, 0) 2.97em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 2.64em, rgba(255, 255, 255, 0) 2.64em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #F5A503 0, #F5A503 2.97em, rgba(255, 255, 255, 0) 2.97em) 0 0, 
linear-gradient(to left, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 2.97em, rgba(255, 255, 255, 0) 2.97em) 0 0, 
linear-gradient(to right, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 3.3em, rgba(255, 255, 255, 0) 3.3em) 0 0, 
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 2.97em, rgba(255, 255, 255, 0) 2.97em) 0 0,
 
linear-gradient(to top, rgba(255, 255, 255, 0) 0, #F2385A 0, #F2385A 3.3em, rgba(255, 255, 255, 0) 3.3em) 0 0;
1 Like
22

This is not as exact as you\d like but its the best you’re going to get from me :slight_smile:

1 Like
23

This works.
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;
   /* background-position: 0 0; default */
   /* background-repeat: repeat; default */
 }
2 Likes
24

Ok Good :slight_smile:

…and just for fun and in Firefox only with only 12 lines of code you can do this.

Screen Shot 2021-08-08 at 21.17.46
Screen Shot 2021-08-08 at 21.17.461389×802 65.6 KB

3 Likes
25

Here is a way using SVG

Taking this
https://jsfiddle.net/qd5net2v/

<svg class="box6" width="165" height="165" viewBox="0 0 165 165">
  <rect x="0" y="0" width="165" height="165" fill="teal" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="orange" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="teal" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="teal" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="orange" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="teal" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>

Converting it to a data:image/svg+xml
https://jsfiddle.net/Lbkfurgh/

body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='teal' /><rect x='5' y='5' width='160' height='160' fill='black' /><rect x='10' y='10' width='150' height='150' fill='orange' /><rect x='15' y='15' width='140' height='140' fill='black' /><rect x='20' y='20' width='130' height='130' fill='teal' /><rect x='25' y='25' width='120' height='120' fill='black' /><rect x='30' y='30' width='110' height='110' fill='orange' /><rect x='35' y='35' width='100' height='100' fill='black' /><rect x='40' y='40' width='90' height='90' fill='teal' /><rect x='45' y='45' width='80' height='80' fill='black' /><rect x='50' y='50' width='70' height='70' fill='orange' /><rect x='55' y='55' width='60' height='60' fill='black' /><rect x='60' y='60' width='50' height='50' fill='teal' /><rect x='65' y='65' width='40' height='40' fill='black' /><rect x='70' y='70' width='30' height='30' fill='orange' /><rect x='75' y='75' width='20' height='20' fill='black' /><rect x='80' y='80' width='10' height='10' fill='teal' /></svg>");
}
2 Likes
26

To have 4 colors in the middle, what would this be changed to?
https://jsfiddle.net/f36tqmbs/

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

27

A bit of a cheat (and the colours change) but here we go :slight_smile:

1 Like
28

Here is another way:
https://jsfiddle.net/c160vdj5/

/* For the latest browsers: */
    conic-gradient(at 85px 85px, #3f48cc 0deg 90deg, #f00 90deg 180deg, #ff0 180deg 270deg, #99D9EA 270deg 360deg),
    /* or browsers that do not support conic-gradient: */
    left 85px top 85px / 165px 165px linear-gradient(45deg, #3f48cc 0px 59px, #0000 59px 175px, #ff0 175px 233px),     
    left 85px top 85px / 165px 165px linear-gradient(-45deg, #99D9EA 0px 60px, #0000 60px 175px, #f00 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(-135deg, #3f48cc 0px 60px, #0000 60px 175px, #ff0 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(135deg, #f00 0px 61px, #0000 61px 175px, #99d9ea 175px 233px);
1 Like
29

I have a question.

How is left by itself able to fill the whole middle square?

This:
linear-gradient(to left, teal 85px, #0000 85px);

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

Because it repeats

If you remove all the other styles you are left with this which then answers your question.

Screen Shot 2021-08-13 at 16.33.28
Screen Shot 2021-08-13 at 16.33.281243×1008 29.8 KB

2 Likes
32

This works, what are your thoughts on using webkit?

As I understand, webkit can’t be removed from the code.

https://jsfiddle.net/7gv3jzty/

Also, how would these shorthand properties be written in long form?

0 0/165px 100%;

2.5px 2.5px/165px 165px;

These converted to long form properties would be what?
or, it doesn’t work like that?

background: 0 0/165px 100%;

background: 0 0/100% 165px;

body::before,
body::after {
  content: "";
  
  --g:
    teal 0 5px, black 0 10px, orange 0 15px, black 0 20px,
    teal 0 25px, black 0 30px, orange 0 35px, black 0 40px,
    teal 0 45px, black 0 50px, orange 0 55px, black 0 60px,
    teal 0 65px, black 0 70px, orange 0 75px, black 0 80px,
    teal 0 85px,
    teal 0 90px, black 0 95px, orange 0 100px, black 0 105px,
    teal 0 110px, black 0 115px, orange 0 120px, black 0 125px,
    teal 0 130px, black 0 135px, orange 0 140px, black 0 145px,
    teal 0 150px, black 0 155px, orange 0 160px, black 0 165px;
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, var(--g)) 0 0/165px 100%;
}

body::after {
  background: linear-gradient(var(--g)) 0 0/100% 165px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/165px 165px;
}
33

The first is background-position property and then after the slash is the background-size property.

You should be able to work it out from that. :slight_smile:

1 Like
34

Sometimes you have to use it as there is no choice. As long as it doesn’t break the page if a browser doesn’t support the property then it’s ok.

It’s usually a question of browser support:

You should always use the real property as the last in sequence when you use a prefix. Otherwise you may end up using an out of date spec and will of course miss all the browsers not supporting the WebKit prefix but who do understand the real property.

1 Like
35

What would be the alternative to using webkit here?
-webkit-mask:

mask by itself doesn’t work in the code: https://jsfiddle.net/fza8n16c/
mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/165px 165px;

or, I wasn’t able to figure it out.

Is there no alternative to webkit in this case?

oh, I see I think what you mean.

firefox supports css mask by itself without the webkit prefix.

Chrome does not yet support it.

How come firefox is the only browser that has full support without the webkit prefix?

They implemented full support starting in 2017.

36

I changed this:
background: 0 0/165px 100%;

To this:

  background: linear-gradient(90deg, var(--g));
  background-size: 0 0;
  background-position: 165px 100%;
}

And got it wrong: https://jsfiddle.net/vomLq7xz/

37

Yes you did.

You did the opposite of what I said:)

The 0 0 is the background position not the size!!

2 Likes
38

Up to the next one: https://jsfiddle.net/p6ma8hgn/1/

background: 2.5px 2.5px/165px 165px;

What property does 2.5px belong to?

This doesn’t work: https://jsfiddle.net/jh7dL9me/

background-position: 2.5px 2.5px;
background-size: 165px 165px;
39

That’s the way all properties are developed. They are never implemented universally at the same time.

Browser makers use prefixes when they develop a new property. -moz is for Firefox and -ms is Microsoft and -WebKit is WebKit based browsers.

Originally it was never meant for you or I to use prefixes in production but only for experiments and testing.

However people never do what they are told and started using prefixes to get support for the latest property in their browser of choice. This is fine if all you are adding is decoration but no good if the site breaks for everyone else so you have to be selective on what you use.

2 Likes
40

That’s not a background property its a -webkit-mask property. You need mask-position and mask-size (with a webkit prefix).

1 Like
41

Like this? https://jsfiddle.net/suLefch7/

body::after {
  background: linear-gradient(var(--g)) 0 0/100% 165px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg);
  -webkit-mask-position: 2.5px 2.5px;
  -webkit-mask-size: 165px 165px;
}
1 Like