Search code examples
htmlcsslinear-gradientscss-gradients

CSS3 gradients not working in any browser

I have scoured the internet for 2 days now and I have been unable to find an answer to my problem: CSS linear-gradient is not working in my code, in any browser. I have seen gradients in fiddles that work, and on other websites that work. I have even tried copying and pasting their code into mine and it does not work. I get only the plain background color that is for my fallback. I've even triple-checked my spelling just to make sure that something isn't a PEBCAK error... When I tried putting my code into a fiddle, it still did not work. I'm stumped... does anyone see what I'm doing wrong?

My research trail started with an answer here that explained gradients need a height, so I saw a trick for the body to set the min-height. Then I saw that most people had gradients in divs, so I added a test div to try it out with a set height of 100px. Nothing has worked. Here's my current test code:

My HTML:

<body>
<div>

    <div class="gradient">
        This is a test
    </div>

</div>
</body>

CSS:

*, html {
margin:0;
padding:0;
font-family:Calibri;
}

body {
min-height: 100vh;
background: #64647f;
background: linear-gradient (to bottom, #64647f 0%, #b2b2c2 20%);
}

.gradient {
border: 1px solid black;
height: 100px;
background: linear-gradient (red, yellow);
}

The body is really what I care about (to set up the background for the page). I tried adding the div with gradient class with just named colors as a copy-paste from another page to see if it would work.

Yes, I know it is not backwards compatible, I'll get there after I can get it to work normally for myself. I'm running Chrome Version 50.0.2661.75 m, on Windows 10. Have also tested it in IE (Edge) and Firefox... not even a hint of a gradient to be seen. I even tried the -webkit- prefix for Chrome just to see if that'd work... no dice.

Here's a fiddle with said code for anyone to play with: https://jsfiddle.net/e0p48ubf/2/

Solution

  • I am the queen of all PEBCAK users right now... Thank you Harry for pointing out my problem:

    Proper syntax is linear-gradient(...) <-- note, no space between gradient and (

    I hang my head in shame... Thanks again, Harry!