Изменение центральной точки радиального градиента в CSS

Question

Мне нужно сделать несколько градиентов, как показано ниже:

Теперь посмотрим, чем отличается центр серого / белого градиента, в некоторых случаях он идет от центра, для некоторых от левого центра, для некоторых от нижнего центра.

Я использовал ЭТОТ инструмент для создания градиента ниже:

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 ); 

ПОКУПКА ЗДЕСЬ, теперь можно ли сделать градиенты, как я показал на изображении выше, или мне придется использовать изображения?

Answer 1

Ваш вопрос состоит из двух частей:

1. Можно ли сделать градиенты как на картинке? Да, это возможно. radial-gradient определение принимает положение в качестве параметра и, установив правильное значение, мы можем произвести требуемый эффект.
2. Может ли сам генератор градиента генерировать его? Не похоже, что связанный генератор может сделать это, потому что в момент, когда Ориентация установлена ​​как радиальная, по умолчанию он позиционируется по центру, и нет поля для изменения его значения. Могут быть другие генераторы градиента, у которых есть поле для установки этого значения, но вам все равно придется указать центральную точку самостоятельно.

Ниже приведен фрагмент с радиальными градиентами, имеющий разные позиции для вашей справки.

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>