HTML and CSS Reference
In-Depth Information
FIGURE 4.21
background:
radial-gradient(50% 50%, 100%
100%, rgb(75, 75, 255), rgb(0,
0, 0));
swamps the container.
FIGURE 4.22
Creating an
ellipse using different vertical
and horizontal radius values.
Neo's amphetamine lunch?
RADIAL GRADIENT SIZE AND SHAPE
The second set of values in the radial gradient syntax (
60% 60%
in the example)
dictates the size of the gradient—the horizontal and vertical radius size. Because
you are working with the radius rather than the diameter, 50% or 60% will produce
a nice spread across a container. 100% would be double the width / height of the
container, swamping it entirely, which may or may not be the effect you want
(
Figure 4.21
).
NOTE:
Firefox has never implemented size percentage
values, so they won't work in Firefox. For this reason, it is
better to use keyword values.
Again, to set these values, you can use any units that make sense. You can also
use different values for the horizontal and vertical radii, for example:
background: radial-gradient(50% 50%, 70% 40%, rgb(75, 75, 255),
p
rgb(0, 0, 0));
This effect is shown in
Figure 4.22
.
