Using Nested Gradients

[asasass]

Nested Gradient
code: https://jsfiddle.net/310eyvh5/

Trying to make this:
code: https://jsfiddle.net/2hyjog3r/

Is this possible?

[SamA74]

@asasass

Is this possible?

Evidently, it is.

[asasass]

I tried here:

code: https://jsfiddle.net/0bymnj1k/1/

How do you add more colors/gradients?
More border lines.

.basic {
  width: 170px;
  height: 170px;
  padding: 5px;
  box-sizing: border-box;
  
  border: 5px solid transparent;
  
  background:
    linear-gradient(red, red) content-box,
    linear-gradient(blue, blue) padding-box,
    linear-gradient(green, green) border-box;
}

[ladans37]

Looks like you got it . If you want thin stripes, just need to adjust the height and width, and maybe padding if you’re using that too.

[PaulOB]

@asasass

More border lines.

Probably easier just to use box-shadow with an inset.

You can add as many as you want now.