Semi Transparent Header With Gradient
You might also want something a bit more complex. You can also apply any level of transparency to your Header Container Background, or as in the example here, set a gradient background with varying levels of opacity.
Step 1. To start, set the Header Container Background to Gradient. In the example below, the top gradient has been set to white at 94% opacity, and the bottom gradient has been set to fully transparent, as seen below.
Step 2. Again, in the Extras tab, the Position Absolute option has been turned to On.
As a result, the second container in the header has an almost solid white at the top of the header, quickly graduating to fully transparent. You can adjust where the opacity starts and ends, and how smoothly it graduates, with the Gradient Start and End Position.
OK, that’s it. There are many ways you can use transparency in your Header Layouts, but this should give you the tools to achieve pretty much any header effect you are thinking of.