Gradient in css not distributed evenly

Question

I'm using a gradient as a background. I was hoping that the gradient would start out darker and gradually lighten as it gets to the other end of the container that it is applied to. Instead, what I notice is that the darker part covers around 90% and only after this 90% does it start to get lighter. It would be nice if around 50% it was halfway between the start and end color. Is there any way of achieving this? Here is my css:

  background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background: linear-gradient(bottom, #f4f7fa 0, white 100%);
  background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);

A number of good gradient generators out there, one referenced by Johnathan above. Also you could use sass+compasss compass-style.org/reference/compass/css3/gradient — jhanifen
– jhanifen, Commented Aug 15, 2013 at 4:23
I'll second the recommendation of colorzilla.com/gradient-editor — Bob Gilmore
– Bob Gilmore, Commented Aug 15, 2013 at 4:31

Shiva · Accepted Answer · 2013-08-15 05:00:35Z

1

Try using this code

background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);

Gradient property explanation:

linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);

So in your code the color #D6D6D6 started form 0% and moves upwards,

then color #FFFFFF stated form 100% as offset is set as 100%(and it ends there too).

So to get the consistent flow from one color to other you should set the offset of second color to 50%.

Check this link to better understand CSS Gradient property.

Regards

Shiva

edited Aug 15, 2013 at 5:00

answered Aug 15, 2013 at 4:40

Shiva

6,9034 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

No explanation as to what the problem is? Is this a guess? If so, it should be a comment. An answer should explain what was wrong

Johann Over a year ago

This works. Maybe I misunderstood what the % was about. The darker gradient went up to about 90% of the container height. So it makes you wonder why 100% does that, yet your 50% does it halfway. Seems to be somewhat inconsistent.

Ruan Mendes Over a year ago

@Shiva +1 Thanks, I got it after AndroidDev's comment, but it's a more complete answer now

Collectives™ on Stack Overflow

Gradient in css not distributed evenly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related