Why is my background styling getting ignored?

March 2, 2022

I have this a scrollable component:

<div>
  <div className="scrolling-component">...</div>
  <div className="button">...</div>
</div>

And in the scss file I have:

.scrolling-component {
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  height: 100px;
}

But I checked the dev tools and it looks like there’s something wrong with the syntax, I’ve been looking at it for a while now and have yet to figure out what exactly is wrong with it, I was thinking perhaps it’s the radial-gradient, help is appreciated!

>Solution :

I tried your code and dev tools are showing error ‘Invalid property value’ in background. you forgot to add ‘at’ in radial gradient:
working gradient:

linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;