Ionic 4 transparent transparent header
If you want translucent header in ionic 4 you need to add the "translucent" property to the header tag, not the toolbar tag.
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Toolbar Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<!-- content here -->
</ion-content>
From the ionic doc... Translucent
Attribute: translucent Type: boolean If true, the header will be translucent. Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content. Defaults to false.
...
<ion-toolbar color="translucent">
...
and if you want to get rid of the box shadow of your header you can do it in your css like:
.header::after {
background-image: none;
}
Did you try this ?
ion-toolbar {
--background-color: transparent;
--ion-color-base: transparent !important;
}