Full page length gradient and overlay

Design help General
1

Hello Webflow Community!

The problem I’m running into is that I cannot figure out how to get this gradient to flow the entire length of the page (scale with the content). As you can see from the read-only link, after what is visible from the body, the gradient works fine, but it repeats. I want the gradient to span the entire length of the page.

An exact example of what I’m trying to achieve is here: https://diagram.com/

I’ve got the gradient colors I’d like to use, but I’m having trouble with 1. getting the gradient to stretch as the page increases in height, and 2. I’m wanting the gradient to feather out into black (basically like what https://diagram.com/ has).

Here is a read-only copy of the project I’m working on.
https://preview.webflow.com/preview/frame-classic-c18f51688542cb756829109e5?utm_medium=preview_link&utm_source=designer&utm_content=frame-classic-c18f51688542cb756829109e5&preview=90fc22d83e82c602b7eaac236359f17e&workflow=preview

Also, I’d like the stars overlay to scale the entire length of the page as well. I will be using a different overlay in production, but I just used this image to see if I could receive help.

Thanks a lot!

1 Like
2

hi @hustler use fixed instead absolute

1 Like
3

Thanks for the reply!

Where are you saying to use fixed at?

4

@Stan Ah nevermind I see, you’re saying use fixed on the star overlay. I got that working. What I’m trying to do now is to replicate the full page gradient that the example I sent has. I can’t figure it out, I’ve tried to follow an old tutorial that was posted on this forum in 2015, but can’t replicate it.

Any suggestions on that?

5

hi @hustler you should understand how positioning works. I have given you a solution for your case as you have only overlay. When you wrap the whole page in div (common practice) you can set this wrapper as relative and then you can use absolute on your overlay. It is only to you what is your goal and how to achieve it. A gradient can work the identical way all you need to set it the correct way via WF UI.

Here is a short video if this will help you to understand how it can be done.

1 Like