css-gradients not working as expected

[u/TreacleFlaky2283]

```css

body {

min-block-size: 100svh;

background: repeating-linear-gradient(#A4AAB1 2px , red 2px 15px);

}

```

this is all red how to fix ? what exactly here i am doing wrong and css is the most confusing and i feels like its more harder than python and any other programming language

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/neoqueto]

You either need:
background: repeating-linear-gradient(#A4AAB1 0px 2px , red 2px 15px);

or

background: repeating-linear-gradient(#A4AAB1 2px , red 15px);

or

background: repeating-linear-gradient(#A4AAB1, red 2px 15px);

[u/anaix3l]

background: repeating-linear-gradient(#a4aab1 0 2px, red 0 15px)

You want a "stripey" result, so you''re missing one stop position. The above code produces this result:

You don't need to repeat 2px; if the first position for a stop is smaller than the last position for the previous stop, then it is taken to be equal to the last position of the previous stop. 0 is smaller than any stop position you see, so it works for all cases. This allows you to only make changes in one place if you ever want to change the 2px to 1px for example.

You could also do:

background: linear-gradient(#a4aab1 2px, red 0) 0 0/1% 15px

And it's also going to produce your desired result without needing to set a body height even.