ionic 5 status bar transparent code example

Example: ionic hader toolbar transparent

// use this css

/* Transparent standard */
ion-toolbar {
    --background: transparent;
    --ion-color-base: transparent !important;
}

/* Show background if class is active */
.show-background {
    border-style: none;
    background: var(--ion-color-primary);
}

/* Remove bottom border on md */
.header-md::after {
    background-image: none;
}

/* Remove bottom border on ios */
.header-ios ion-toolbar:last-child {
    --border-width: 0;
}

Tags:

Css Example