If you want to have a header shadow like this

Do the below guiding:

Add these codes to the Custom CSS box

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header {
    box-shadow: 3px 2px 9px #f1f;
}
}

Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
 header#header {
    box-shadow: 3px 2px 9px #f1f;
}
}

Blog Page

/* Blog Page */
[class*="type-blog"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

Event Page

/* Event */
[class*="type-event"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

Product Page

/* Product Page */
[class*="type-products"] header#header {
    box-shadow: 3px 2px 9px #f1f;
}

Cart Page

/* Cart Page */
body#cart header#header {
    box-shadow: 3px 2px 9px #f1f;
}

Homepage Only

/* Homepage Only */
body.homepage header#header {
    box-shadow: 3px 2px 9px #f1f;
}

Other pages – exclude homepage

/* Other pages - exclude homepage */
body:not(.homepage) header#header {
    box-shadow: 3px 2px 9px #f1f;
}

On Scroll Only

/* On Scroll Only */
header#header.shrink {
    box-shadow: 3px 2px 9px #f1f;
}

Before Scroll

/* Before Scroll */
header#header:not(.shrink) {
    box-shadow: 3px 2px 9px #f1f;
}

One Page

Add this code to the Individual Page Header Code Injection (If your plan is Personal, you can add code to Code Block)

<!-- Header Shadow - One Page -->
<style>
header#header {
    box-shadow: 3px 2px 9px #f1f;
}
</style>