I need to make multiple gradients like below:
Now see how the center of the grey/white gradient differs, in some cases it come from the center, for some from the left-center, for some from the center-bottom.
I used THIS , tool to generate the below gradient:
background: #f9f9f9;
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1 );
FIDDLE HERE , now is it possible to make gradients like how I have shown in the image above, or will I have to use images?
There are two parts to your question:
radial-gradient
definition takes the position as a parameter and by setting the correct value, we can produce the required effect. Below is a snippet with radial gradients having different positions for your reference.
div { float: left; height: 200px; width: 200px; margin: 2px; background: #f9f9f9; } div:nth-of-type(1){ background: radial-gradient(ellipse at center, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(2){ background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(3){ background: radial-gradient(ellipse at left top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(4){ background: radial-gradient(ellipse at right bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(5){ background: radial-gradient(ellipse at right top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(6){ background: radial-gradient(ellipse at center top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(7){ background: radial-gradient(ellipse at 10% 20%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(8){ background: radial-gradient(ellipse at 75% 75%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); } div:nth-of-type(9){ background: radial-gradient(ellipse at 20% 80%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); }
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.