CODEWITHSUNDEEP
csslinear-gradients
TechnoPulseLabs
TechnoPulseLabs

Reputation: 111

CSS3 Gradient issue when applied in same long page

I want to create header and footer with same gradient. I have used below code to achive same. But When I am viewing it in any browser, thought I have used same colors in footer, the footer gradient gets lighter in shade with increase in distance between header and footer.

<div style="
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FBB511, endColorstr=#F6941C);
background: -webkit-gradient(linear, left top, left bottom, from(#FBB511), to(#F6941C));
background: -moz-linear-gradient(top, #FBB511, #F6941C);
background: -ms-linear-gradient(top,  #FBB511 ,#F6941C); width:1000px; height:40px"></div>

Some sort of Gradient clear or what can help in this? How can I solve this?

Thanks.

Upvotes: 0

Views: 36

Answers (2)

nicogaldo
nicogaldo

Reputation: 585

Try this pages

Colorzilla - CSS3 Factory - IE Gradient generator - Google

Upvotes: -1

Mohit Aneja
Mohit Aneja

Reputation: 428

Its not a coding issue, its the view perspective, if you have used the same css colours and code for both header and footer, they are the same. Try to stand up and look from the top of the screen. You should see the header darker and footer lighter.

To confirm, you can create two side by side tags with position fixed and see if footer matches the header.

Upvotes: 0

Related Questions