Changing the center point of a radial gradient in CSS

Question

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?

Skein

This generator seems a bit more flexible when it comes to setting the center: colorgradient.dev/gradient-generator – Demit

Answer 1

There are two parts to your question:

1. Is it possible to make gradients like in the image? Yes, it is possible. radial-gradient definition takes the position as a parameter and by setting the correct value, we can produce the required effect.
2. Can the gradient generator itself generate it? It doesn't seem like the generator linked in question can do this because the moment Orientation is set as radial, it defaults the position to center and there is no field to change its value. There could be other gradient generators which have a field for setting this value but still you'd have to provide the center point by yourself.

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>

Constabulary