Почему такой «резкий контур» при использовании радиального градиента?

Question

[RealBoy211]

Я хочу воспользоваться радиальным градиентом в качестве маски, однако при его использовании контур маски становится «очень резким». Причём в меньших размерах это выглядит ещё более наглядно. В общем, не подскажите, можно ли как-то убрать эту резкость (помимо непропорционального размера)?



--> CodePen

Comments

[Ankhena]

Стыкуйте цвета не 50% и 50%, а 50% и 50.1%
Подбирается индивидуально.

[RealBoy211]

Ankhena, я это и подразумевал, говоря о непропорциональности. Там чем меньше размер объекта, тем большее смещение необходимо. Если на десктопе достаточно 0,5%, на телефонах это 3-5%, что в свою очередь будет отображаться на размерах маски.

Я надеялся на какое-нибудь более универсальное решение, если оно есть, конечно.

[Ankhena]

RealBoy211, посчитайте через calc и vw.
Или перепишите через media.

Или замените на SVG.

Answer 1

[Aetae]

background-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(50% - .5px), #fff calc(50% + .5px));