How would I convert this code to a linear-gradient?
https://jsfiddle.net/m4ykhcpb/
.box {
box-shadow:
0 0 0 5px teal,
0 0 0 10px black,
0 0 0 15px orange,
0 0 0 20px black,
0 0 0 25px teal,
0 0 0 30px black,
0 0 0 35px orange,
0 0 0 40px black,
0 0 0 45px teal,
0 0 0 50px black,
0 0 0 55px orange,
0 0 0 60px black,
0 0 0 65px teal,
0 0 0 70px black,
0 0 0 75px orange,
0 0 0 80px black,
0 0 0 85px teal;
}
You don’t say why you want to do this?
The box-shadow is the most succinct way to accomplish that so I am not sure why you would want another method?
Anyway here’s one way a linear gradient could be used but seems overly verbose. There probably is a shorter way but its not going to get any shorter than the box-shadow method I don’t think.
I also put a demo with the box shadow on the inside as opposed to the outside like yours just in case that’s what you were thinking.
I have it made in a box-shadow, and an svg form, I wanted to know how it would be made using a gradient.
How come when I use linear-gradient the code looks exactly the same?
Is there a way to tell conic and linear gradient apart?
How do you know when to use linear, and when to use conic?
https://jsfiddle.net/Lm06q7jh/
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;
background-repeat: no-repeat;
}
Yes I was just playing around to see what happens so I guess some things are the same. All the gradients are pretty complex and I don’t really understand all the intricacies.
I was trying to do something like this but as squares instead of circles because it requires a few lines of code.
.box3 {
width: 170px;
height: 170px;
background: repeating-radial-gradient(
teal 0 5px,
black 5px 10px,
orange 10px 15px,
black 15px 20px
);
}
There probably is a solution in there somewhere but may take some experimenting.
How come your conic circle doesn’t look like this?
https://jsfiddle.net/8xhk1rd0/1/
Would adjustments be made to it?
It’s a repeating gradient so it just keeps on repeating. I don’t believe you can tell it just to repeat x number of times (or I haven’t found a way to do that yet).
You could just use border-radius and a pseudo element to get that effect.
Have a look at the MDN site for documentation on all these.
There’s a lot to look at and a lot to take in.
Would repeating-linear-gradient work on the square code?
I tried but couldn’t find a way to do it. The linear gradient works because the background-size is sized to fit each gradient but that wouldn’t make sense on a repeating gradient. Once again I’m not saying its impossible but just that I can’t see a way to do it yet 
Would repeating-linear-gradient work with a square?
If it would, how would it be written?
or maybe you did, I don’t know.
or, what about this one?
Have you tried that one?
repeating-conic-gradient
Can this be improved?
Code 1
https://jsfiddle.net/Lzqko342/
.box {
width: 170px;
--coloration: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
background:
repeating-linear-gradient(0deg, var(--coloration)) top,
repeating-linear-gradient(180deg, var(--coloration)) bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
I was able to do this:
Can it be improved further?
Code 2
https://jsfiddle.net/0cdyj9g1/
.box {
width: 170px;
background: repeating-linear-gradient(teal 0 5px, black 0 10px, orange 0 15px, black 0 20px);
background-size: 100% 50%;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
Next I was able to do this.
or maybe this one could be improved further?
Code 3
https://jsfiddle.net/1g82xkpj/
.box {
width: 170px;
background:
repeating-linear-gradient(0deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) top,
repeating-linear-gradient(180deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
Why can’t background-repeat: no-repeat; be used on Code 2?
When added it messes it up.
https://jsfiddle.net/Lst1u4dn/
Because you want it to repeat to get the second half of the square. In the others you had two linear gradients but in code1 you only have the one (plus the pseudo element).
Doesn’t it do exactly what you want without the no-repeat? It looks to be the most succinct so far.
In your example, how is .box2 fixed so the whole image is showing?
Right now it is cutoff.
That is the last box in your example.
<div class="box6"></div>
<div class="box5"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="test1"></div>
<div class="box"></div>
<div class="box2"></div>
.box2 {
width: 0px;
margin: 90px 0 0 85px;
box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}
I gave you 2 examples one using inset and the one without inset (the code you had).
The box-shadow on your original example goes outside the box and of course takes up no space in the flow on the page. The box is zero height and zero width and I simply used margins to push it away from overlapping everything.
In the other example I used inset for the box shadow and that draws the shadow inside the box and maintains the flow of the fixed width/height box.
I have them in a column, how would I be able to get the whole image to be visible?
That’s awkward because margin-bottom doesn’t really apply to the viewport. You’d probably have to do this:
.box4:after{content:"";margin-top:90px;display:block;}
Or put 90px padding on the bottom of the body element.
This didn’t work
https://jsfiddle.net/mvfL54ej/2/
Wouldn’t margin-top: 90px; push box4 down further?
.box4::after {
content: "";
margin-top: 90px;
display: block;
}
No it pushes the pseudo element down to hold the page open. I forgot in my example I had changed the margins on the box so in your example you just need to increase the margins here.
.box4::after {
content: "";
margin-top: 180px;
display: block;
}
