Search code examples
htmlcssnibstyluslinear-gradients

Stylus Nib Gradients

I'm hoping someone here will know the answer to this problem as its driving me a bit mental right now.

The problem is that my gradients will only work horizontally but not vertically. When I try to make it go from top to bottom on the page, it repeats in stripes. See Screenshot I have used Chromium, Chrome and Firefox on this and all of them show the same thing.

I'm using NPM, Gulp and Stylus which all work fine. I tried using Kouto-Swiss but ran into this gradient issue so I tried Nib instead, had the same issues. I think I might be missing something obvious but I can't see it. This little project is actually for me to play around with Flexbox but this gradient problem needs fixing.

Here's the code: All Files In This Bin

Excuse the sloppiness, its a testing ground :D

Solution

  • Add height:100% to html and body rules in your CSS.

    html, body {
    height:100%;
}