Why doesn’t this work?

Question

I can’t figure out why this code doesn’t make a radial gradient continuously throughout all the squares?
https://code.sololearn.com/WTGd20n52CUY/?ref=app

Answer 1

Arf...
If you also expect only once background for many shapes, that's not possible.
If you only expect each shape filled with its own gradient, all at once, there is two ways possible (but in all cases, you have to obviously remove the height assignation previously set -- all the most with the second solution):
1> you need to at least remove the background-color definition of each one, and modify the css selector to target the childs instead the container itself (the simplest way is to change ".myshapes" to ".myshapes *" since there's no other childs to be prevevented to be filled with the gradient)
2> let the gradient selector as is (since you've removed the height, the container no more will be filled/visible) and change the "background-color" to each childs to be filled with the gradient to "background: inherit;"

Answer 2

Thanks. I did what you said but theres still a problem. Maybe I didnt understand exactly what you meant.

Answer 3

Ok. well the gradient is applied to the background tho. not the boxes. i want the gradient to fade in the boxes

Answer 4

yes

Answer 5

Because the div you expect to be filled has no height: since every of its childs are positioned (use of css "position" value other than "static"), they are removed of the normal content flow, so the auto-sizing height default behavior reduce its height to zero... You need to set an explicit height (such as "height:300px;") to be able to see it and the radial-gradient applied ^^

Anyway, you're not advised to use the prefixed version (--webkit-) of the radial-gradient property (at least alone) because you will miss compatibility with many browsers (prefix-free should be sufficient actually for this value), and even your radial-gradient work when you fix the height of the element, I'm quite not sure you use it right:

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

Answer 6

From my previous test, it seems to me that at least with leaving the prefixed value and your syntax that was working without modifying the radial-gradient arguments... maybe I was missing something and fixed it without taking care ^^ However, I've advised you to check the link about it: it works if you follow/use the good syntax:

background: radial-gradient(circle at bottom, blue, black);

Answer 7

You mean you want the gradient applied to the childs elements (those wich are absolute positioning)?