Gradient as background

Hello everybody. I run into an issue with linear-gradient as background.
When I’m doing
–ion-background-color: linear-gradient(#4786ef, #f4f5f8);
I’m getting this


So gradient refreshing inside evry block of ion-content. I want it to be like static background gradient.
Does somebody know the solution?

instead of setting the variable, which is used by many components (as you discovered), set the background on the component:

ion-content {
  --background: linear-gradient(#4786ef, #f4f5f8);
}
1 Like

Thank for your answer, but it will set background white to all children of ion-content. I’m trying to find something which is like static background-image.

Maybe create a mockup in a design tool so we can understand the look you are going for?

I wrote about background images here: https://chrisgriffith.wordpress.com/2019/03/02/background-images-for-ionic-4/

I’m not really sure that it is possible to do what I want.
I was expecting linear-gradient to cover all child element of ion-content without starting gradient from the beginning.
So visually it needs to be like at first screenshot but without repeating gradient from the beginning inside ion-item
or other containers.

Actually, you just need to tell the container not to have a background

ion-content {
    --background: linear-gradient(#4786ef, #f4f5f8);
}

ion-item {
    --background: none;
}

Exactly what i was looking for. Thank you very much

Another example:

Ref: Theming your Ionic 3 App - Part 2