CODEWITHSUNDEEP
htmlcssionic-frameworkionic4
Colin Ragnarök
Colin Ragnarök

Reputation: 1062

Toolbar is not displaying the color gradient which is given by CSS

I want a toolbar to have not a single color but a gradient so two colors. Since the color attribute is taking only one color I would have to use the background attribute of CSS. I tried that also after researching online, without any success. The toolbar always stays white. I have also reproduced the problem in a StackBlitz below:

StackBlitz: https://stackblitz.com/edit/ionic-v4-rght6l?file=src/app/app.component.html

Code

Html:

<ion-header>
  <ion-toolbar>
    <ion-title>
       Hello
    </ion-title>
      <ion-buttons slot="primary">
        <ion-button>
         Bye
        </ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

CSS:

ion-toolbar {
    --ion-background-color: linear-gradient(to right, red 0%, green 100%) !important;
}

Upvotes: 2

Views: 405

Answers (1)

Kobi
Kobi

Reputation: 137997

First, you need to import the SCSS file as part of your component:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

Next, it looks like you should use --background instead of --ion-background-color:

ion-toolbar {
   --background: linear-gradient(to right, red 0%, green 100%) !important;
}

Working example: https://stackblitz.com/edit/ionic-v4-emtady

Upvotes: 1

Related Questions