Radial Gradient Readability [CSS Working Group Wiki]

This is an old revision of the document!

Radial Gradient Readability

We've agreed that radial gradients should have a literate syntax. Linear gradients already kinda have one, in a simple way, and hopefully radials should end up thematically consistent.

Current Proposal

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

Where <extent> is either a farthest/closest-side/corner keyword or an explicit <length>{1,2}. Arguments after <shape> can be reordered; everything is optional.

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.

<html><a href=“data:text/html;charset=utf-8,<!DOCTYPE%20html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv%20%7B%20%0Awidth%3A%20200px%3B%0Aheight%3A%20200px%3B%0Aborder%3A%20thin%20solid%3B%0Afloat%3A%20left%3B%0Amargin%3A%2010px%3B%0A%7D%0Adiv%3Afirst-child%20%7B%20%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2050%25%2050%25%2C%20150%2C%20from(white)%2C%20to(black))%3B%0A%7D%0Adiv%3Anth-child(2)%20%7B%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2025%25%2025%25%2C%20225%2C%20from(white)%2C%20to(black))%3B%0A%7D”>Examples</a></html> (view in webkit)

<html> <table rules=“groups” class=“data” cellpadding=“5”> <caption>Examples</caption> <thead> <tr> <th><a href=“http://www.w3.org/TR/2011/WD-css3-images-20110908/#repeating-gradients”>Current WD</a> </th> <th>Preview</th>

<th><a href=“http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.200;content-type=text%2Fhtml”>Current ED</a></th> </tr> </thead> <tbody> <tr> <td>

radial-gradient(white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial1.png”/> </td> <td>

radial-gradient(white, black)

</td> </tr> <tr> <td>

radial-gradient(center, farthest-corner ellipse, white, black)

</td> <td>

radial-gradient(ellipse to farthest-corner at center, white, black)

</td>

</tr> </tbody> <tbody> <tr> <td>

radial-gradient(top left, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial2.png”/> </td> <td>

radial-gradient(at top left, white, black)

</td> </tr> <tr> <td>

radial-gradient(top left, farthest-corner ellipse, white, black)

</td> <td>

radial-gradient(ellipse at top left to farthest-corner, white, black)

</td> </tr>

</tbody> <tbody> <tr> <td>

radial-gradient(circle, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial3.png”/> </td> <td>

radial-gradient(circle, white, black)

</td> </tr> <tr> <td>

radial-gradient(circle, center, white, black)

</td> <td>

radial-gradient(circle at center, white, black)

</td> </tr> </tbody>

radial-gradient(center, 5em 5em, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial4.png”/> </td> <td>

radial-gradient(to 5em, white, black)

</td> </tr> <tr> <td>

radial-gradient(center, 5em 5em, white, black)

</td> <td>

radial-gradient(circle to 5em at center, white, black)

</td> </tr> </tbody> <tbody>

radial-gradient(75% 75%, closest-side circle, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial5.png”/> </td> <td>

radial-gradient(circle at 75% 75% to closest-side, white, black)

</td> </tr> </tbody> <tbody> <tr> <td>

radial-gradient(25% 2em, 15px 30%, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial6.png”/> </td> <td>

radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)

</td>

</tr> </tbody> </table> </html>

Alternate Proposal

Feedback on CSS3.info indicates that people find “to <length>” awkward. Since technically only one of <size> or <position> needs a keyword (for unambiguous parsing), fixed sizes could be combined with the shape keyword. This does mean that size must come before position (although either could be omitted).

The alternate syntax would be radial-gradient([ <extent> || <shape> ] at <position>, <colors>).

For example, radial-gradient(5em circle at 25% 50px, white, black)

Comparison to other proposal:

<html> <table rules=“groups” class=“data” cellpadding=“5”> <caption>Examples</caption> <thead> <tr> <th>Alternate Proposal </th> <th>Preview</th>

<th><a href=“http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.200;content-type=text%2Fhtml”>Current ED</a></th> </tr> </thead> <tbody> <tr> <td>

radial-gradient(white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial1.png”/> </td> <td>

radial-gradient(white, black)

</td> </tr> <tr> <td>

radial-gradient(ellipse farthest-corner at center, white, black)

</td> <td>

radial-gradient(ellipse to farthest-corner at center, white, black)

</td>

</tr> </tbody> <tbody> <tr> <td>

radial-gradient(at top left, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial2.png”/> </td> <td>

radial-gradient(at top left, white, black)

</td> </tr> <tr> <td>

radial-gradient(farthest-corner ellipse at top left, white, black)

</td> <td>

radial-gradient(ellipse at top left to farthest-corner, white, black)

</td> </tr>

</tbody> <tbody> <tr> <td>

radial-gradient(5em circle, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial4.png”/> </td> <td>

radial-gradient(to 5em, white, black)

</td> </tr> <tr> <td>

radial-gradient(5em circle at center white, black)

</td> <td>

radial-gradient(circle to 5em at center, white, black)

</td> </tr> </tbody> <tbody>

radial-gradient(closest-side circle at 75% 75%, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial5.png”/> </td> <td>

radial-gradient(circle at 75% 75% to closest-side, white, black)

</td> </tr> </tbody> <tbody> <tr> <td>

radial-gradient(15px 30% ellipse at 25% 2em, white, black)

</td> <td rowspan=“2”><img src=“http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial6.png”/> </td> <td>

radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)

</td>

</tr> </tbody> </table> </html>

Table of Contents