Самый простой вариант - добавить 1px на переход - тогда граница получится немного размытая и будет выглядеть лучше:
main {
width: 50vw;
height: 50vh;
background: linear-gradient(to top right, silver calc(50% - .5px), blue calc(50% + .5px));
}
<main></main>
Но в таком случае при увеличении масштаба переход может оказаться совсем размытым, например, вот при 500%:

Чтобы этого избежать можно использовать экранный пиксель:
:root { --spx: 1px; }
@media (-webkit-min-device-pixel-ratio: .09 ) { :root { --spx: 10px; } }
@media (-webkit-min-device-pixel-ratio: .25 ) { :root { --spx: 4px; } }
@media (-webkit-min-device-pixel-ratio: .33 ) { :root { --spx: 3px; } }
@media (-webkit-min-device-pixel-ratio: .5 ) { :root { --spx: 2px; } }
@media (-webkit-min-device-pixel-ratio: .66 ) { :root { --spx: 1.5px; } }
@media (-webkit-min-device-pixel-ratio: .75 ) { :root { --spx: 1.333333333px; } }
@media (-webkit-min-device-pixel-ratio: .79 ) { :root { --spx: 1.25px; } }
@media (-webkit-min-device-pixel-ratio: .89 ) { :root { --spx: 1.111111111px; } }
@media (-webkit-min-device-pixel-ratio: 1 ) { :root { --spx: 1px; } }
@media (-webkit-min-device-pixel-ratio: 1.1 ) { :root { --spx: 0.009090909px; } }
@media (-webkit-min-device-pixel-ratio: 1.25) { :root { --spx: 0.008px; } }
@media (-webkit-min-device-pixel-ratio: 1.5 ) { :root { --spx: 0.006666667px; } }
@media (-webkit-min-device-pixel-ratio: 1.75) { :root { --spx: 0.005714285px; } }
@media (-webkit-min-device-pixel-ratio: 2 ) { :root { --spx: 0.005px; } }
@media (-webkit-min-device-pixel-ratio: 2.2 ) { :root { --spx: 0.004545455px; } }
@media (-webkit-min-device-pixel-ratio: 2.5 ) { :root { --spx: 0.004px; } }
@media (-webkit-min-device-pixel-ratio: 3 ) { :root { --spx: 0.003333333px; } }
@media (-webkit-min-device-pixel-ratio: 3.5 ) { :root { --spx: 0.002857143px; } }
@media (-webkit-min-device-pixel-ratio: 4 ) { :root { --spx: 0.0025px; } }
@media (-webkit-min-device-pixel-ratio: 5 ) { :root { --spx: 0.002px; } }
@media (-webkit-min-device-pixel-ratio: 6 ) { :root { --spx: 0.001666667px; } }
@media (-webkit-min-device-pixel-ratio: 8 ) { :root { --spx: 0.00125px; } }
@media (-webkit-min-device-pixel-ratio: 10 ) { :root { --spx: 0.001px; } }
main {
width: 50vw;
height: 50vh;
background: linear-gradient(
to top right,
silver calc(50% - var(--spx) / 2),
blue calc(50% + var(--spx) / 2)
);
}
<main></main>
Ну и при необходимости можно добавить полный комплект фоллбэков на случай если не поддерживается calc и на случай если не поддерживаются переменные:
:root { --spx: 1px; }
@media (-webkit-min-device-pixel-ratio: .09 ) { :root { --spx: 10px; } }
@media (-webkit-min-device-pixel-ratio: .25 ) { :root { --spx: 4px; } }
@media (-webkit-min-device-pixel-ratio: .33 ) { :root { --spx: 3px; } }
@media (-webkit-min-device-pixel-ratio: .5 ) { :root { --spx: 2px; } }
@media (-webkit-min-device-pixel-ratio: .66 ) { :root { --spx: 1.5px; } }
@media (-webkit-min-device-pixel-ratio: .75 ) { :root { --spx: 1.333333333px; } }
@media (-webkit-min-device-pixel-ratio: .79 ) { :root { --spx: 1.25px; } }
@media (-webkit-min-device-pixel-ratio: .89 ) { :root { --spx: 1.111111111px; } }
@media (-webkit-min-device-pixel-ratio: 1 ) { :root { --spx: 1px; } }
@media (-webkit-min-device-pixel-ratio: 1.1 ) { :root { --spx: 0.009090909px; } }
@media (-webkit-min-device-pixel-ratio: 1.25) { :root { --spx: 0.008px; } }
@media (-webkit-min-device-pixel-ratio: 1.5 ) { :root { --spx: 0.006666667px; } }
@media (-webkit-min-device-pixel-ratio: 1.75) { :root { --spx: 0.005714285px; } }
@media (-webkit-min-device-pixel-ratio: 2 ) { :root { --spx: 0.005px; } }
@media (-webkit-min-device-pixel-ratio: 2.2 ) { :root { --spx: 0.004545455px; } }
@media (-webkit-min-device-pixel-ratio: 2.5 ) { :root { --spx: 0.004px; } }
@media (-webkit-min-device-pixel-ratio: 3 ) { :root { --spx: 0.003333333px; } }
@media (-webkit-min-device-pixel-ratio: 3.5 ) { :root { --spx: 0.002857143px; } }
@media (-webkit-min-device-pixel-ratio: 4 ) { :root { --spx: 0.0025px; } }
@media (-webkit-min-device-pixel-ratio: 5 ) { :root { --spx: 0.002px; } }
@media (-webkit-min-device-pixel-ratio: 6 ) { :root { --spx: 0.001666667px; } }
@media (-webkit-min-device-pixel-ratio: 8 ) { :root { --spx: 0.00125px; } }
@media (-webkit-min-device-pixel-ratio: 10 ) { :root { --spx: 0.001px; } }
main {
width: 50vw;
height: 50vh;
background: linear-gradient(to top right, silver 50%, blue 50%);
background: linear-gradient(to top right, silver calc(50% - .5px), blue calc(50% + .5px));
background: linear-gradient(to top right, silver calc(50% - var(--spx) / 2), blue calc(50% + var(--spx) / 2));
}
<main></main>