HTML and CSS Reference
In-Depth Information
Using the contain keyword means the gradient
stops when it touches the edges of the containing
element:
background: radial-gradient(
at 25% 25%, contain, #000, #fff
);
As with linear gradients, a radial gradient can
have any number of color stops:
background: radial-gradient(
at 25% 25%, #000, #fff, #000, #fff
);
Because gradients replace background images, you can use
the same background properties on them as you use for
background images. You can use this to your advantage to
produce some useful effects, as you'll see next.
If you want your gradient to only cover part of
the background, you can use the background-size
property:
background: linear-gradient(
top, #000, #fff
) no-repeat;
background-size: 100% 50%;
This might be most useful when you want to put
a gradient in a fixed part of the background
rather than scale it across the whole thing.
You can also size a radial gradient, although the
effect isn't as pleasing:
background: radial-gradient(
at 25% 25%, #000, #fff
) no-repeat;
background-size: 100% 50%;
 
Search WWH ::




Custom Search