Можно ли избавиться от полос работая с радиальным или другим видом градиента?

#css #градиент

Я понимаю причину возникновения данной проблемы, но можно ли каким-то образом обойти
этот момент при увеличении прозрачности?



body {
margin: 0;
padding: 0;
background: #333;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle farthest-side at 50% 100%, #fff, transparent);
opacity: .1;
}






    

Ответы

Ответ 1

Можно, если увеличить "промежуток" между двумя цветами. Иными словами, выбрать такие
цвета, разница между которыми будет большая.

К тому же, данную проблему разные мониторы видят по разному. На обычных @1 мониторах
менее заметно, на ретине больше. На мониторе с плотностью пикселей выше ретины оно
вовсе ужастно заметно.

Пример ниже, в разы сглаженнее (даже на retina), так как имеет более широкий диапозон:
#555 -> #111


body {
margin: 0;
padding: 0;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle farthest-side at 50% 100%, #555, #111);
opacity: 1;
}





В текущем контейнере он выглядит хорошо. Но если увеличить контейнер до такого порога,
пока количество "промежуточных цветов" закончатся, то градиент сново будет иметь полоски.

Альтернативное решение

В вашем случае, если имеется фон и на него нужно наложить прозрачно-белую плешку,
то можете воспользоваться box-shadow.


Ответ 2

Обойти нельзя, это связано с ограничениями цветопередачи, количество градаций серого
ограничено цветовым пространством sRGB и их не хватает для каждого пикселя на экране.