Hello i want to make a gradient header on ion-navbar on my ionic 3 project.

home.html
<ion-header><ion-navbar color="primary">

variables.scss

$colors: ( primary: linear-gradient(red, yellow),

This doesnt work. color="primary" works if i put a single color value (e.g. #333)

Any idea how to make it gradient?

You cannot make a gradiant using 'color' - it can only have a single value. You need to use 'background. Have a look at https://codepen.io/cathydutton/pen/dPPpWj..

Or just Google 'CSS Gradiant' to get a list of online gradiant generators.