How to use repeating gradient to create a square?

Shouldn’t they look different?

Can someone explain how this is possible?

The images are the same, there is no difference between them, why?

https://jsfiddle.net/5yxhqw91/



.conic {
  height: 170px;
  width: 170px;
  background:
    conic-gradient(teal, teal) center / 10px 10px no-repeat,
    conic-gradient(black, black) center / 20px 20px no-repeat,
    conic-gradient(orange, orange) center / 30px 30px no-repeat,
    conic-gradient(black, black) center / 40px 40px no-repeat,
    conic-gradient(teal, teal) center / 50px 50px no-repeat,
    conic-gradient(black, black) center / 60px 60px no-repeat,
    conic-gradient(orange, orange) center / 70px 70px no-repeat,
    conic-gradient(black, black) center / 80px 80px no-repeat,
    conic-gradient(teal, teal) center / 90px 90px no-repeat,
    conic-gradient(black, black) center / 100px 100px no-repeat,
    conic-gradient(orange, orange) center / 110px 110px no-repeat,
    conic-gradient(black, black) center / 120px 120px no-repeat,
    conic-gradient(teal, teal) center / 130px 130px no-repeat,
    conic-gradient(black, black) center / 140px 140px no-repeat,
    conic-gradient(orange, orange) center / 150px 150px no-repeat,
    conic-gradient(black, black) center / 160px 160px no-repeat,
    conic-gradient(teal, teal) center / 170px 170px no-repeat;
  background-repeat: no-repeat;
}
.linear {
  float: top;
  height: 170px;
  width: 170px;
  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;
}

Hi.
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.
and
later creates an image consisting of a gradient with color transitions rotated around a center point
In the conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise.

both share the same syntax and the image as well but they work in a different way.

You are creating the same pattern with them!
I may not be able solve your confusion but the difference between every types of gradient is that they all work in a different way.

Linear gradient

Linear gradients transition colors progressively along an imaginary line.

Radial gradient

Radial gradients transition colors progressively from a center point (origin).

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area.

Conic gradient

Conic gradients transition colors progressively around a circle.

Try this.!
Screenshot(14)

and this!
Screenshot(15)

notice the difference?

1 Like

Would I be able to add a “Repeating Gradient” to one of the gradients?

https://jsfiddle.net/5yxhqw91/

And if this can be done, how would it be written into the code?

I was trying to figure out how to do that.

Why not?
try this!


and this

What I meant was, can a repeating-linear-gradient or a repeating-conic-gradient be used to create this whole image?

Yes , absolutely, it can create the same image.

How, can you show me please?

just replace conic-gradient with repeating-linear-gradient.
do some experiments with it.

Would I be using less code?

for creating given pattern?
no.
at least, i don’t know.
i would be happy if there is.

I thought using one of them would help cut down the amount of code I was using to create the image.

maybe we could wait and some senior would explain more things to us…

Can this circle be turned into a square?

https://jsfiddle.net/sz28t4h0/

.box,
.box:before {
  width: 170px;
  height: 170px;
  display: block;
  background: #000;
}
.box:before {
  content: "";
  background: repeating-radial-gradient(
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
  border-radius: 50%;
}

yes, it can be turned into a square.

Can you show me how I can do that?

see that? it uses the radial-gradient
now think what this gradient is doing here?

It’s making a circle.

yes!

and this

now what you need to do?

Remove that, then what?

Screenshot(19)