Streaming live at 10am (PST)

"Gradient" Template 'Contact' page Tutorial?


#1

Hey webflow'ers-

I was scanning the marketplace for inspiration and stumbled upon the template called "gradient".
The Contact page with Google Maps as the background with the bottom fade is amazing. Would I have to purchase this template to get a step by step of how it was done? Or can someone offer a tutorial?

Thanks!


#2

Hi. If you purchase this theme, you can see very clearly how it's made wink

But a simple step by step:

  1. Insert Google map, give z-index 0
  2. Insert a block or section with a gradient (100% color to 0% color). This will be the fade. Give z-index higher than map (to be safe set to 50 or something). Finally give it a top margin of - something. For example if the "fade" is 300 pixels high, then give -300 pixels top margin.

Any content you wish to add you can add after this.


#3

Great @rowan thanks!


#4