Repository navigation
[css-images-4] Add ability to change radial gradient focus #1575
Description
During the discussions that led into the current radial-gradient() syntax, there was an extended proposal that included the ability to specify the geometric center and color focus of the gradient separately. That proposal is summarized in
https://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html
and consists of a from <position> or from offset <offset> argument (depending on whether an absolute position or relative offset is desired), and was slated for consideration for a future level of CSS Images, so copying here.
Activity
bradkemper commentedon Jul 23, 2017
The use cases beyond background images seem pretty limited. And for that we have background-position.
AmeliaBR commentedon Jul 24, 2017
@bradkemper This is unrelated to background position. It's about creating asymmetrical gradients.
Some examples of what off-center focal points look like, using the SVG syntax, so people know what we are talking about (click on screenshot to go to code version):
A real off-center SVG gradient (left), versus faking it with multiple layered CSS gradients:
All the the major rendering engines already support this for SVG (except that WebKit doesn't support repeating SVG gradients).
For me, the spherical shading effect is the most practical use-case. But the off-center repeating gradients are fun, too.
bradkemper commentedon Jul 24, 2017
Ah. OK.