W3C home > Mailing lists > Public > www-style@w3.org > November 2011

Re: [css3-images] Making gradients readable

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 4 Nov 2011 18:28:26 -0700
Message-ID: <CAAWBYDCfDL59nLnjO_k+V-1pYVKPqyVVfeXwxFFo5UOVBsEJUg@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Brian Manthos <brianman@microsoft.com>, "L. David Baron" <dbaron@dbaron.org>, fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Fantasai and I came to a consensus on the syntax we'd like to see:

radial-gradient(<shape> to <extent> at <position>, <colors>)

In Images 4, when we add the ability to change the focus point, it'll look like:

radial-gradient(<shape> to <extent> at <position> [from <position> |
from offset <length>{1,2}], <colors>)

(Both of these grammars are approximate, and omit the details that
make each piece optional and order-variable.)

We chose this because 'from' really sounds like it should be
specifying where the 0% color emerges from.  Once that decision has
been made, 'at' seems to be the best of the remaining options for
specifying the center of the shape.

Because the default size is cover, this means:

* radial-gradient(from 25% 25%, <colors>) makes the 0% color at 25%
25%, and the 100% color is at a box-centered box-covering ellipse.
* radial-gradient(at 25% 25%, <colors>) makes the 0% color at 25% 25%,
and the 100% color at a 25% 25%-centered box-covering ellipse.

Examples of the above can be seen on the wiki at

How does this sound?

Received on Saturday, 5 November 2011 05:40:37 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:06 UTC