Background color gradient in Ionic 2

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?

Solution 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)

Solution 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:

1. 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%);
   }
   

2. 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!

Solution 3

$background-color variable won't work instead use $app-background

Example: $app-background: linear-gradient(to bottom, #000 0%, #fff 100%);