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.
The text was updated successfully, but these errors were encountered:
@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.
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 inhttps://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html
and consists of a
from <position>
orfrom 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.The text was updated successfully, but these errors were encountered: