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

Question

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

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

Я использовал THIS, инструмент для генерации ниже градиента:

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, теперь это можно сделать градиенты как то, как я показано на рисунке выше, или мне придется использовать изображения?

Answer 1

Есть две части вашего вопроса:

1. Можно ли сделать градиенты, как на картинке? Да, это возможно. radial-gradient definition takes the position as a parameter и установив правильное значение, мы можем произвести требуемый эффект.
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>

Answer 2

Радиальная градиента очень запутанным, но посмотрите на мой учебник:

<div class='wet'> </div> 
<style> 
.wet{ 
    width: 100px; 
    height: 100px; 
    border-radius: 15px; 
    background: -webkit-radial-gradient(#159, #394ee); 
} 
</style>