Reputation: 1792
I want to make a radial-gradient
background and place it in bottom right corner of my Region
element. I want it to have a fixed radius of 30px. According to documentation I can either specify percentage or fixed size. Problem is when type in fixed size my gradient is being rendered in top left corner, but when I use percentage it acts like supposed to. What am I missing?
Code and result for fixed size:
radial-gradient(focus-angle 0deg, focus-distance 0%, center 100% 100%, radius 30px, #ffb06a 0%, #cc3671 50%, #3f003a 100%);
Code and result for percentage:
radial-gradient(focus-angle 0deg, focus-distance 0%, center 100% 100%, radius 30%, #ffb06a 0%, #cc3671 50%, #3f003a 100%);
Upvotes: 0
Views: 122
Reputation: 24453
According to the docs
Percentage and length sizes can not be mixed in a single gradient function.
This means if you want to have a fixed radius of 30px, then the center point should also be defined using px, for example:
radial-gradient(focus-angle 0deg, focus-distance 0%, center 600px 400px, radius 30px, #ffb06a 0%, #cc3671 50%, #3f003a 100%);
Upvotes: 1