How would I be able to repeat a gradient like how this one is?
https://jsfiddle.net/utm29kce/
body{
background: radial-gradient(#80f20d 5%, transparent 6%, transparent 20%, #0d46f2 21%, #0d46f2 30%, transparent 31%, transparent 40%, #80f20d 41%, #80f20d 50%, transparent 51%), white;
background-size: 180px 180px;
background-position: 0 0;
}
With one of these?
https://jsfiddle.net/Lumhjv08/
I’m not sure what you are asking as it seems to be doing what you want already?
If you only wanted one circle in a div then just set the size of the div.
e.g.
I gave you a repeating radial gradient earlier on so if you want to repeat in the same div you’d do this (you wouldn’t need the background size or the no-repeat).
It’s unclear what you require though as we have already done this with your other colours.
I’m not using a circle though.
Which of these codes in here would I be using?
Were you able to have one of these repeat?
https://jsfiddle.net/hv8L6qx3/
Not for a square shape. I could only get circles repeating.
Only circles can be repeated, not squares?
As far as I can tell yes only circles or ellipses. Liner gradients are in lines or angles not patterns.
Slightly shorter way using box-shadow again
I’m trying to do this.
You said it can’t be done.
What is this exactly?
That’s just three of the same boxes in a row?
What’s different about that image that you haven’t achieved already?
In this code the gradient is able to repeat itself.
https://jsfiddle.net/utm29kce/
I was trying to do that with the square.
You mean you want multiple instances of that square box. It’s very confusing because we’ve been talking about repeating the gradient to make one square box not multiple boxes.
I think you can do it with background-repeat but its very verbose as you have to draw the box in. detail.
Here’s a pen I found that seems to do what you ask for.
It came from this site.
How come the one with the circle uses less code?
Wouldn’t that be the ideal way to do it?
But with a square instead.
Because there is a specific value that allows circles to be repeated or ellipses but not squares (as far as I can tell).
Don’t ask me why but I guess its not as easy as circles to implement in the specs.
I know that when it is changed from radical to linear it works.
or maybe it is easy to do with lines also.
https://jsfiddle.net/jxq3zykn/1/
body{
background: linear-gradient(#80f20d 5%, transparent 6%, transparent 20%, #0d46f2 21%, #0d46f2 30%, transparent 31%, transparent 40%, #80f20d 41%, #80f20d 50%, transparent 51%), white;
background-size: 180px 180px;
background-position: 0 0;
}
No it won’t be easy to do with lines because they just repeat across as single lines. You would need to do as shown in that demo and add multiple lines with different color stops to achieve the square design.
In that demo, are the boxes infinite, as in, it goes on forever, or are there only a certain number of boxes?
How would I put my box code in there?
Also, can white space be added between the boxes?
I am confused on how to do that.
The demo you provided.
https://jsfiddle.net/1w2b96jh/
I am so confused.
background: linear-gradient(teal, teal) center / 10px 10px no-repeat,
linear-gradient(black, black) center / 20px 20px no-repeat,
linear-gradient(orange, orange) center / 30px 30px no-repeat,
linear-gradient(black, black) center / 40px 40px no-repeat,
linear-gradient(teal, teal) center / 50px 50px no-repeat,
linear-gradient(black, black) center / 60px 60px no-repeat,
linear-gradient(orange, orange) center / 70px 70px no-repeat,
linear-gradient(black, black) center / 80px 80px no-repeat,
linear-gradient(teal, teal) center / 90px 90px no-repeat,
linear-gradient(black, black) center / 100px 100px no-repeat,
linear-gradient(orange, orange) center / 110px 110px no-repeat,
linear-gradient(black, black) center / 120px 120px no-repeat,
linear-gradient(teal, teal) center / 130px 130px no-repeat,
linear-gradient(black, black) center / 140px 140px no-repeat,
linear-gradient(orange, orange) center / 150px 150px no-repeat,
linear-gradient(black, black) center / 160px 160px no-repeat,
linear-gradient(teal, teal) center / 170px 170px no-repeat;
Yes they go on forever.
That code just creates one box. The background-size :sets the size of it and then the background-repeat repeats that size forever.
You’d have to create that as a transparent (or white) border added into the mix.
You would have to modify it to use your colours and your measurements.
The box is basically built up like a cross section. The first gradient line across the top can be one color then the next line would be 10px of the top color followed by 150px of the first inner color followed by 10px of the top color.
e.g.
col1… col1…col1
col1…col2…col1
col1.col2 …col3 …col2…col1
col1.col2 .col3 …col4…col3.col2…col1
…and so on like a meat slicer.
Except it’s a little more complicated than that as you need transparent sections to allow each colour to show properly. That’s why the demo was done in SCSS so it can be automated and would be the way to go about changing it.
Unfortunately I don’t have a couple of hours to spare this weekend to play around with it.
To create that, the background size would need to be this.
background-size: 165px 165px;
The codepen demo I linked to is more or less the same as that image except you have more borders to cope with.
It is certainly possible if you invest the time to modify it.
As I said I’m not at my own computer for a couple of days so don’t have time to prove the point. It is a very long winded way to achieve what you want and maybe the job for a simple image or svg.
