Background color gradient in Ionic 2 - css

Question

I'm trying to set the background-color for my app using $background-color variable in variables.scss file. This works fine when setting just a color, like #000 or #fff, but can't make it work with a gradient.
$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);
This code throws the following Sass error:
argument '$color' of 'rgba($color, $alpha)' must be a color Backtrace.
So, how can I set the background-color to be a gradient?

Answer 1

This is the scss code I use for my own background gradient.
$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);
.side-menu-gradient{
background: -webkit-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
}
(Maybe highly inspired from Ionic Creator - Creating beautiful Sidemenus (YouTube)

Answer 2

If you want to set the background colour of a page, for example home.html page, to a gradient, you should follow these two steps:
In home.html you should have a class called home in the ion-content tag:
<ion-content padding class="home">
...
</ion-content>
Go to home.scss file (create one if you do not have it) and define the home class:
.home {
background: linear-gradient(to bottom, #000 0%, #fff 100%);
}
Make sure this sass is being compiled by importing it into app.css file:
#import "../pages/home/home";
Insert this line of code in your app.css file.
Do ionic run android in your Terminal and ... you'll have a gradient background for your home page!
Done!

Answer 3

$background-color variable won't work instead use $app-background
Example:
$app-background: linear-gradient(to bottom, #000 0%, #fff 100%);