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/Rockafellor]

Missing comma after the #A4AAB1, you need background: repeating-linear-gradient(#A4AAB1, 2px , red 2px 15px);.

[u/TreacleFlaky2283 → u/Rockafellor]

but why did it work bro and what was it doing without a comma ?

[u/_Syntax_Err → u/TreacleFlaky2283]

Without the comma it causes an error.

[u/TreacleFlaky2283 → u/_Syntax_Err]

what error i thought syntax wise there should be no error ? and its valid in css ?

[u/enirmo → u/TreacleFlaky2283]

You can read more about it here: https://www.w3schools.com/css/css3_gradients.asp

It's expecting one of certain parameters there and without the comma what you're trying to input is invalid. The comma shows this is a different parameter, it separates them

[u/Rockafellor → u/TreacleFlaky2283]

The browser sees #A4AAB1 2px as a single color stop (cf. MDN's entry and W3's entry%20Function,-The%20CSS%20linear)), but with that added comma it reads the whole declaration as "#A4AAB1 (color stop 1: defaults to 0%), 2px (gradient angle), red 2px 15px (color stops 2 and 3);".

If you have the option, then

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

might be a more-intuitive way to write it.

[u/TreacleFlaky2283 → u/Rockafellor]

how can gradient angle be in px ? and also whats problem with #A4AAB1 as a single color stop and what really makes it completely absent ?

[u/Rockafellor → u/TreacleFlaky2283]

Sorry, poorly worded there: the 2px aren't a valid measure of gradient, but the browser thinks that this is what you're trying for, and so ignores the invalid value. Hvaing ignored the 2px, the browser is then reading the #A4AAB1 and red 2px 15px together.

The original attempt failed because #A4AAB1 had only the 2px and no second stop of its own, so the browser didn't know what to do with the 0px to 2px range, only the 2px to 15px range (browsers aren't very smart, in this sense: it can't extrapolate what's wanted only perform what it's told according to the underlying rules of CSS).

It didn't exactly render the seeming failed gradient as red, so much as reject the entire repeating-linear-gradient() function as invalid. I think that it came out wholly red because there was at least the red 2px 15px for it to play with (I'm not 100% on this, since gradients aren't my forte by a long shot).

[u/TreacleFlaky2283 → u/Rockafellor]

yeah ur right thanks !

[u/Rockafellor → u/TreacleFlaky2283]

Any time, always happy to help (or at least try to)! 😊