CODEWITHSUNDEEP
htmlcss
Johann
Johann

Reputation: 29877

Gradient in css not distributed evenly

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);

Upvotes: 0

Views: 297

Answers (1)

Shiva
Shiva

Reputation: 6887

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

Upvotes: 1

Related Questions