Member Avatar for SimonIoa

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?

Edited by Dani because: Moved to correct forum
  • 2 Contributors
  • 1 Reply
  • 4K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by SkinHead

Dani AI

Generated

You cannot store a gradient in the $colors map and use it via color="primary" in Ionic 3. That API expects a solid color token and compiles to a background-color, not a background-image. Instead, target the navbar’s background element and set a gradient with SCSS. Scope it per page to avoid affecting other headers.

In src/pages/home/home.scss:

page-home {
  ion-navbar .toolbar-background {
    background: linear-gradient(90deg, #e53935, #fdd835);
    background-color: transparent; /* fallback handled by gradient */
    border: 0; /* hide default hairline/border */
  }

  .toolbar-title {
    color: #fff; /* ensure contrast on the gradient */
  }
}

To apply the same gradient app-wide, move the selector to src/app/app.scss:

ion-header .toolbar-background {
  background: linear-gradient(90deg, #e53935, #fdd835);
  border: 0;
}

Notes:

  • If platform-specific styles override you, target .toolbar-background-md and .toolbar-background-ios similarly.
  • Remove color="primary" on the ion-navbar if it conflicts with your custom background.
  • Test contrast and tap-state visibility for buttons/icons on the toolbar; you may need to set their color to #fff for readability.
Member Avatar for SkinHead

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.