Почему размывает градиент?

#css #css3

Подскажите почему размывает линию градиента?
Переход делаю резкий, в браузерах mac os все четко а на винде в хроме размазывает.  

Винда:  



Osx:  





.wrapper {
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: linear-gradient(10deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    height: 500px;
}




    

Ответы

Ответ 1

Mozilla Firefox при 45deg без зубчиков. Наверное за отображение отвечает браузер.





.wrapper {
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    background: linear-gradient(45deg,#5d466f 0%,#5d466f 52%,#5d466f 52%,#f7f9ff
52.05%,#f7f9ff 100%);
    height: 500px;
}





Добавлено

В некоторых случаях края линий становятся зубчатыми, причем их отрисовка зависит
от браузера: Chrome справляется лучше, в Firefox видны ступеньки. Чтобы сделать край
плавным, можно сделать стык между цветами не четкий, а размытый, шириной 1-2%. Также
следует помнить о проблеме с прозрачными цветами в Firefox — это решается использованием
нужного оттенка с полной прозрачностью.

http://yoksel.github.io/css-patterns/

Чтобы граница градиента была ровной, без зубчиков, границу прозрачности нужно делать
чуть дальше, чем точка остановки цвета.

https://codepen.io/yoksel/pen/eolqw

Попробуй так:

$transparent: rgba(0, 0, 0, 0);

$color-1: #5d466f;

$size: 100%;
$big-size: $size*1;
$min: 0;
$max: $size*0.668;

.wrapper  {
    height: 500px;
    width: 100%;

  background: 
    linear-gradient(10deg,
      $color-1 $max, 
      $transparent $max*1.005
      ) 

    ;
  background-size:  $big-size $big-size;
  }




Ответ 2

Можно убрать лишний #5d466f 52% должно помочь



.wrapper {
    background: -webkit-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff
100%);
    background: -moz-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff
100%);
    background: -o-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff
100%);
    background: -ms-linear-gradient(80deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff
100%);
    background: linear-gradient(10deg,#5d466f 0%,#5d466f 52%,#f7f9ff 52.05%,#f7f9ff
100%);
    height: 500px;
}