===== 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. ==== Latest Proposal ==== * for CSS3: ''radial-gradient([ || ] at , )'' * for CSS4: ''radial-gradient([ || ] at [from | from-offset {1,2}], )'' Because the default size is ''cover'', this means: * ''radial-gradient(from 25% 25%, )'' makes the 0% color at 25% 25%, and the 100% color is at a box-centered box-covering ellipse. * ''radial-gradient(at 25% 25%, )'' makes the 0% color at 25% 25%, and the 100% color at a 25% 25%-centered box-covering ellipse. Illustration of moving geometric center vs. moving color focus (view in webkit) The '''' is either a ''farthest/closest-side/corner'' keyword or an explicit ''{1,2}''. Example: ''radial-gradient(5em circle at 10% 15%, white, black)'' Everything is optional except the colors. Examples: ''radial-gradient(5em, white, black)'', ''radial-gradient(circle, white, black)'', ''radial-gradient(at top left, white, black)'', ''radial-gradient(white, black)''.

Syntax Comparison for Level 3
Current WD	Latest ED
`radial-gradient(white, black)`	`radial-gradient(white, black)`
`radial-gradient(center, farthest-corner ellipse, white, black)`	`radial-gradient(farthest-corner ellipse at center, white, black)`
`radial-gradient(top left, white, black)`	`radial-gradient(at top left, white, black)`
`radial-gradient(top left, farthest-corner ellipse, white, black)`	`radial-gradient(farthest-corner ellipse at top left, white, black)`
`radial-gradient(circle, white, black)`	`radial-gradient(circle, white, black)`
`radial-gradient(circle, center, white, black)`	`radial-gradient(circle at center, white, black)`
`radial-gradient(center, 5em 5em, white, black)`	`radial-gradient(5em, white, black)`
`radial-gradient(center, 5em 5em, white, black)`	`radial-gradient(circle 5em at center, white, black)`
`radial-gradient(75% 75%, closest-side circle, white, black)`	`radial-gradient(closet-side circle at 75% 75%, white, black)`
`radial-gradient(25% 2em, 15px 30%, white, black)`		`radial-gradient(15px 30% ellipse at 25% 2em, white, black)`

==== Original Proposal ==== The original proposal was ''radial-gradient( to at , )''. In this proposal all arguments after '''' could be reordered. However, [[http://www.css3.info/radial-gradient-readability/|feedback on CSS3.info]] indicated that people find "to " awkward, hence the Latest Proposal above. For example, ''radial-gradient(5em circle at 25% 50px, white, black)'' Comparison to other proposal:

Examples
Alternate Proposal	Current ED
`radial-gradient(white, black)`	`radial-gradient(white, black)`
`radial-gradient(ellipse farthest-corner at center, white, black)`	`radial-gradient(ellipse to farthest-corner at center, white, black)`
`radial-gradient(at top left, white, black)`	`radial-gradient(at top left, white, black)`
`radial-gradient(farthest-corner ellipse at top left, white, black)`	`radial-gradient(ellipse at top left to farthest-corner, white, black)`
`radial-gradient(5em circle, white, black)`	`radial-gradient(to 5em, white, black)`
`radial-gradient(5em circle at center white, black)`	`radial-gradient(circle to 5em at center, white, black)`
`radial-gradient(closest-side circle at 75% 75%, white, black)`	`radial-gradient(circle at 75% 75% to closest-side, white, black)`
`radial-gradient(15px 30% ellipse at 25% 2em, white, black)`		`radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)`