You are using a gradient in the background of your website. Nice! But how should the header behave?
Here are some options.
Option 1: Do nothing
- don’t add a background color to your header
- don’t make the header fixed
- don’t add some fancy backdrop filter to blur what’s underneath it
- just do nothing
By leaving the header completely transparent and non-fixed, it stays at the very top where it belongs. The moment your visitors start scrolling down to read your content, the header simply scrolls away and disappears out of sight. It lets your background gradient and your content do all the talking.
Just take care of the contrast. The elements in the header should still be visible.
Option 2: the frame
- make the header sticky
- add the same gradient of the background to the header
- add background-attachment: fixed to both gradients
You’ve created an elegant look where the header is always visible. Because the background of the header is the same gradient as the page, you don’t have to add any special effect. At least not more than you had to like in option 1 in the first place.
Option 3: go grazy
- make the header sticky
- add some frosted glass effect
- apply shadows
- make it smaller when scrolling
- do all the crazy shit you can think about to make it pop