Background color gradient in Ionic 2

Question

I am trying to set the background color for my application using the $background-color variables.scss in the variables.scss file. This works great when setting only colors, such as #000 or #fff , but cannot 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 to set the background color as a gradient?

Answer 1

This is the scss code that 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 very inspired by the Ionic Creator - Creating the Perfect Sidemon (YouTube)

Answer 2

If you want to set the background color of a page, such as home.html page, to a gradient, you must follow these two steps:

• In home.html you should have a home class in the ion-content tag:

   <ion-content padding class="home"> ... </ion-content> 

  Go to the home.scss file (create it if you don’t have one) and define the home class:

   .home { background: linear-gradient(to bottom, #000 0%, #fff 100%); } 

• Make sure this sass is compiled by importing it into the app.css file:

   @import "../pages/home/home"; 

Paste this line of code into your app.css file.

Make ionic run android in your Terminal and ... you will have a gradient background for your home page!

Done!

Answer 3

$background-color will not work instead of $app-background

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