Summary
Adding a shadow to a header using CSS is a simple yet effective way to enhance the design of your website. Shadows can add depth and make elements stand out, creating a more polished and professional look. Let’s take a look at few different techniques for adding shadows to headers using CSS.
Adding CSS into WordPress
Luckily, WordPress allows you to add custom CSS without any need for you to actually adjust any code, no need to learn how to get to FTP, how to add code to a theme, you can simply just open your Customizer and copy-paste the code in Custom CSS.
Here is a video tutorial how to add Custom CSS.
If you are not using Minimalio theme, you might have to find out the correct class for your header. That might be just header or something else. To find out, use the dev tools in your browser.
Header shadow underneath
Most probably, this is what you are looking for, just simple shadow, that separates your header from the rest of your webpage.
To do this, use the box-shadow property
The most common way to add a shadow to a header is by using the box-shadow property in CSS. Here’s a basic example:
.header {
box-shadow: 0px 8px 24px rgba(149, 149, 149, 0.2);
}
- 0px: Horizontal shadow (right if positive, left if negative) and since we want the shadow to be just underneath, we make this 0.
- 8px: Vertical shadow (down if positive, up if negative), so this is the important number which defines, how low will the shadow be.
- 24px: Blur radius (higher values mean more blur), so how blurry will the shadow be.
- rgba(149, 149, 149, 0.2): Shadow color with transparency, as you can see, we are using the rgba, the “a” stands for alpha, allowing us to make the color transparent. And since the first three numbers are identical, that means that there is the same amount of red, green and blue, making the color gray.
Header shadow inside the header
This is an ideal when you are using a transparent header, but the background isn’t contrasty for the header to be visible enough. By adding a shadow background to your header, it will still seem transparent, but the logo and menu will be much more visible.
There are two options, better one is to use background-gradient, you can also use the box-shadow property with the “inset”
To do this, use the background gradient
.header{
background: linear-gradient(0deg, rgba(131,130,130,0) 0%, rgba(7,7,7,0.4) 100%)!important
}
The gradient is a little complex rule, because you can do a lot with it. In this case, it’s just going from darker grey to completely transparent. If you would like to create your own gradient, you can check out this tool and spend an afternoon making cute colors – https://cssgradient.io/.
To do this, use an inset shadow
If you want the shadow to appear inside the header, use the inset keyword:
.header {
box-shadow: inset 0px 68px 44px rgba(49, 49, 49, 0.2);
}
This creates a shadow that appears inside the header, giving it a “pressed” look.
Using a Text Shadow
To add a shadow specifically to the text within the header, use the text-shadow property. I personally don’t like this at all, but you know, everybody has their own taste.
To do this, use a text shadow
.header * {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
Conclusion
If I were you, I would stick with either the header shadow done with box-shadow or linear-gradient. Both can improve your website’s design, and you can create a wide range of visual effects. Try out different shadow sizes, colors, and blur radius to find the perfect look for your project.
