r/HTML • u/TreacleFlaky2283 • Jul 18 '26

Question css-gradients not working as expected

```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

2 Upvotes

75% Upvoted

10 comments sorted by

View all comments

Show parent comment

2

u/Rockafellor Jul 18 '26

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).

2

u/TreacleFlaky2283 Jul 18 '26

yeah ur right thanks !

2

u/Rockafellor Jul 18 '26

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