csspercentageradial-gradients

How to define size of radial-gradient css as a percentage?

How can we define the size of radial-gradient in percentages instead of pixels?

radial-gradient(circle 300px at 5% 20%, red, blue 100%)

I want the gradient to adapt to the size of its container instead of being fixed in pixels, but this syntax doesn't work :

radial-gradient(circle 30% at 5% 20%, red, blue 100%)

Anyone have a solution ?

Solution

  • Use ellipse rather than circle. You can use percentages for those. If you make the width and height the same you get a circle.

    background: radial-gradient(ellipse 30% 30% at 5% 20%, red, blue 100%);