Table of Contents
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([ <extent> || <shape> ] at <position>, <colors>) - for CSS4:
radial-gradient([ <extent> || <shape> ] at <position> [from <position> | from-offset <length>{1,2}], <colors>)
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.
Illustration of moving geometric center vs. moving color focus (view in webkit)
The <extent> is either a farthest/closest-side/corner keyword or an explicit <length>{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).
| Current WD | Preview | 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(<shape> to <extent> at <position>, <colors>). In this proposal all arguments after <shape> could be reordered. However, feedback on CSS3.info indicated that people find “to <length>” awkward, hence the Latest Proposal above.
For example, radial-gradient(5em circle at 25% 50px, white, black)
Comparison to other proposal:
| Alternate Proposal | Preview | 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) |
