Customize ion-header/ion-toolbar

Right now I got some really basic looking header title and I want to lvl up the game a bit.
Is there any way possible to customize the ion-header/ion-toolbar that I can achieve something like this:

My first issue is what would I customize: the ion-header or the ion-toolbar? ion-header gives no css custom properties to work with while ion-toolbar does, but not enough for what I want.

Is it possible in any way? Witch one would I need to customize?
If not, is there a way to create a custom header but still be able to use other elements like ion-buttons and ion-title in it just like with ion-toolbar?

I’m using Ionic 6, btw.

The link you posted show code that works, why not just use that?

My question is where I should use that code. ion-toolbar exposes some custom css properties to work with but not all, like ’ border-bottom-left-radius’. ion-header exposes no custom css properties.

If its not possible, I would create some custom DIV for it but then would ion-buttons and ion-title still work?

try and and see for yourself.

I actually tried it and it’s a pain in the neck when you try it on ios and android. Never understood why they make so difficult to override the css on its components.

My advice is to get familiar with flex. You will get so much experience “hard coding” in css.

because ionic components use the shadow-dom.