SVG linear gradient looks pixelated

Asked Aug 02 '17 at 14:43

Active Aug 02 '17 at 18:49

Viewed 296 times

So I have exported svg background image from sketch and inserted it on the page, but it looks really edgy (banding) in browser. Any tips?

    <linearGradient x1="-2.48949813e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-4">
        <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
        <stop stop-color="#FFFFFF" stop-opacity="0.02" offset="50%"></stop>
        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
    </linearGradient>

Fiddle

edited Aug 02 '17 at 18:49

asked Aug 02 '17 at 14:43

Eduard Dyckman

I think you'll need to explain what you mean by "edgy". – Paul LeBeau Aug 02 '17 at 17:03
Are you referring to what is commonly called "banding"? The bands of slightly different shades of colour? – Paul LeBeau Aug 02 '17 at 17:18
Yes, exactly! Thanks for notice. – Eduard Dyckman Aug 02 '17 at 18:48

SVG linear gradient looks pixelated

0 Answers0