Question

If I have css gradient code that looks like this:

 background-image: radial-gradient(circle farthest-side at center, #E6E6E6 0%, #BABABA 100%);

I’d like to separate the different properties of the gradient to make it more flexible. I mean I should be able to define the different properties (ie circle, farthest-side at center, etc.) as a different property each on separate lines.

Would that be possible?

Answer 1

That is not currently possible, as CSS3 only offers a single functional notation that takes all the values as parameters, rather than a set of properties, for expressing a certain kind of gradient.

The spec implies that this is to make it easier for a browser to generate a gradient on the fly:

The gradient notations described in this section allow an author to specify such an image in a terse syntax, so that the UA can generate the image automatically when rendering the page.

I imagine splitting it into properties would either make style resolution or the syntax too complex, which is why they opted for a functional notation instead.