CSS Gradient doesn't appear

Question

I'm working on a project in which i have to apply a linear gradient to a page body. The gradient just doesn't appear on the page.

I first thought the problem was an error in my code (although no syntax error were detected by the browser), but it didn't work neither with a code example from documentation or gradient generator. Here is my CSS code now (provided by a generator) :

body
{
    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}

And ... the body background is juste invisible. The problem does not come from the html code, since when I change the CSS by something like :

body
{
    background: #ff0000;
}

or with a background image it works ... Of course i tried on different machines, with different browsers from latest to old but none worked. I really don't know what's happening but it makes me insane : everything works except gradients and the error console does not show any errors ; i think i've tried anything i knew, but i'm still stuck. Thanks for helping.

EDIT :

Here is the full code :

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>test</p>
    </body>
</html>

style.css

body
{
    margin: 0;
    padding: 0;
    font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4E443C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);

    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}

How it appears in firefox 25.0.1 :

EDIT 2 :

In Firebug, i've got this :

firebug

Which means the gradient is computed by the browser ... but is obvisouly not rendered ...

do you have any other css stylesheets attached to this?. If you can provide a link to the website, it will be good. — Roy M J
– Roy M J, Commented Dec 10, 2013 at 9:53
Sorry, the website is not online yet, and there is no other stylesheet — ibi0tux
– ibi0tux, Commented Dec 10, 2013 at 9:56
Check the firebug and see if you are over-riding the body style. Also can u post how your css style to body is being rendered in, say Firefox — Roy M J
– Roy M J, Commented Dec 10, 2013 at 9:56

Fred · Accepted Answer · 2017-02-13 15:42:35Z

6

I've noticed setting a gradient on the body if it has a margin of 0 doesn't work.

body
{
    margin:0;
    background:linear-gradient(45deg,red,blue);
}

But, setting height:100% on html makes it render properly. Hope it helps.

html
{
    height:100%;
}

edited Feb 13, 2017 at 15:42

answered Feb 13, 2017 at 13:57

Fred

9888 silver badges15 bronze badges

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

2 Comments

ibi0tux Over a year ago

3 years and 2 months later ... fortunately I am not stuck on this anymore but thank you for your answer ! :D

Fred Over a year ago

haha yeah, i noticed the age of the post AFTER answering, but figured someone else might need it anyway!

user2672265 · Accepted Answer · 2013-12-10 09:52:39Z

0

Apparently the code you provided is working, as @NathanLee said. The problem however is with your browser. So make sure that your browser supports gradients

answered Dec 10, 2013 at 9:52

user2672265

1 Comment

ibi0tux Over a year ago

I tried under Firefox 25, Firefox 3.6 (old syntax) and Safari, without success ... i don't understand.

JCalhoun · Accepted Answer · 2016-03-12 07:08:55Z

0

I had something similar happen to me. It seemed I also had a gradient on the background.

html
{
    background: linear-gradient(rgb(36, 36, 36), rgb(82, 82, 82));
}

It seems having both this gradient and a button gradient means the button loses. I' still trying to figure out how to fix it so both behave.

answered Mar 12, 2016 at 7:08

JCalhoun

911 silver badge2 bronze badges

Collectives™ on Stack Overflow

CSS Gradient doesn't appear

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related