CODEWITHSUNDEEP
htmlcss
Tenali_raman
Tenali_raman

Reputation: 2192

Gradient in CSS giving a stepped background rather than a smooth transitioned one

I have the below gradient applied to my div tag , check it out:

.mw {
  height: 500px;
    background: #ffffff; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: -webkit-linear-gradient(#ffffff 0%, #f9f9f9 100%);
    background: -o-linear-gradient(#ffffff 0%, #f9f9f9 100%);
    background: linear-gradient(#ffffff 0%, #f9f9f9 100%);;; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

FIDDLE HERE , Now when i see the div in my browser , what i get is a background that has a gradient thats kind of stepped I.E. it is not very well transitioned . How do i go about making a well transitioned gradient and WHY am i getting this stepped gradient ? Its kind of hard to understand why i am getting this stepped gradient , when all i have is a 2 stop gradient , can anybody explain ?

Upvotes: 0

Views: 632

Answers (1)

Roope
Roope

Reputation: 4507

Imagine that there are 2 colors in the world. When you make a gradient from the first one to the other, there will be a step exactly in the middle, since there are not enough colors to represent a smooth gradient.

Now, you have a gradient from #ffffff to #f9f9f9 i.e. from white to almost white. The likely explanation for the phenomenon you see is what I described in the first paragraph. There are not enough colors to represent a smooth gradient, since the two colors are so close to each other (think of what a display can represent compared to what your eye can see, in terms of how many colors are available). Thus, you see a stepped gradient.

Some solutions would be e.g. noise and dither, but CSS gradients are likely not consistent about that stuff, depending on the browsers' rendering engines.

In your example, try changing the latter color to a darker one. The darker you go, i.e. the further apart you take the two colors, the smoother you will see the gradient become.

Take a look at this, for example: https://graphicdesign.stackexchange.com/questions/8108/is-it-really-impossible-to-have-gradient-without-banding

Addition:

Note that the larger the area that needs to be covered, the bigger this issue will become. If you try to cover a very large screen with a gradient from color A to color B, you will see more pronounced steps than you would see for a small screen. You can demonstrate this by resizing the fiddle area in the JSFiddle that you have provided. When you make it bigger, the problem becomes more apparent.

Upvotes: 4

Related Questions