<radial-gradient> = radial-gradient( [<position>,]? [[ [<shape> || <size>] | [<length> | <percentage>]{2} ],]? <color-stop>[, <color-stop>]+ )
background-image
property - they can appear currently in cursor
, list-style-image
, or border-image
. In the future, they may be used in Filters, in content
, and other properties. Relying on the background properties to achieve the full set of useful gradients is thus not very attractive, as it limits how we can use gradients in all other situations (or requires us to duplicate the set of background properties for every other property that takes images).<radial-gradient> = radial-gradient( [ from <side-or-corner-or-center> ,]? [circle,]? <color-stop>[, <color-stop>]+ ) <side-or-corner-or-center> = [[left | right] || [top | bottom]] | center
If <side-or-corner-or-center> is omitted, or if it is 'center', then the gradient goes starts with the 0% color-stop in the center of the image, and the 100% color-stop aligned to the four edges. Otherwise, the gradient center is aligned with the indicated side(s), with 0% in the corner (if two sides are indicated) or in the middle of a side (if only one side is indicated) and extends out with 100% color-stop aligned to the other three sides.
If '[[center],]? circle', then the gradient's 100% color stop aligns with the two closest edges (which will be either the horizontal edges or the vertical edges). If '[[left | right] || [top | bottom]], center', then the gradient's 100% color stop aligns with the two closest edges other than those listed by the author in the color-gradient function.
The 'circle' keyword sets the intrinsic ratio of the image to 1:1.
Sample | Syntax A | Syntax B |
---|---|---|
Similar Math for Both | radial-gradient(black 70.7%, red 70.7%, yellow) or radial-gradient(contain, black 100%, red 100%, yellow 141%) | radial-gradient(black 100%, red 100%, yellow 141%) |
Color stops based on image dimensions, with full coverage | radial-gradient(red, black 35.35%, orange 35.35%, orange 70.7%, black 70.7%, red) or radial-gradient(contain, red, black 50%, orange 50%, orange 100%, black 100%, red 142%) | radial-gradient(red, black 50%, orange 50%, orange 100%, black 100%, red 142%) |
Quarter circle that goes full width | Can't be done unless width is known. You can only make circles that size to the farthest side, whether it's horizontal or vertical. | radial-gradient(from top left, circle, yellow, red 100%, black 100%) |
Hearts Grid | background: radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent), radial-gradient(40% 43%, 25px 25px, #b03 99%, transparent), radial-gradient(40% 22%, 25px 25px, #d35 99%, transparent), radial-gradient(60% 22%, 25px 25px, #d35 99%, transparent), radial-gradient(50% 35%, 25px 25px, #d35 99%, transparent), #b03; background-size:100px 100px; | background: radial-gradient(#b03 24%, transparent 25%), radial-gradient(#b03 24%, transparent 25%), radial-gradient(#d35 24%, transparent 25%), radial-gradient(#d35 24%, transparent 25%), radial-gradient(#d35 24%, transparent 25%) #b03; background-size:100px 100px; background-position: 60px 43px, 40px 43px, 40px 22px, 60px 22px, 50px 35px; |
Spotlight effect | background-image: radial-gradient(<set by script to the mouse position>, circle, transparent 100px, rgba(0,0,0,.5) 100px, black 200px) | background-image: radial-gradient(circle, transparent 100px, rgba(0,0,0,.5) 100px, black 200px); background-size: 200% 200%; background-position: <set by script to the inverse of the mouse position>; |