Add patches of gradient colors to the website's background

Hi there,

can you share a link to your site and where on the site you want to apply a similar style ?

Hi David,

Yes, of course! I've added it to the Private Information.

I'd like to add a similar style to the top middle of my website, similar to the position on https://dona.ai/.

I'd also like to add one on the left side of the page at 50% scroll depth. However, since the blog currently lacks contents, there's no depth to it yet.

Thank you, David!

Hi Erman,

Try this for the top:
1. Go to appearance > elements, create a hook element, add this to the element:
<div class="gradient"></div>

2. Choose generate_after_header as the hook, choose location according to your needs.

3. Add this CSS:

.gradient {
    position: absolute;
    width: 60%;
    height: 260px;
    top: 0px;
    right: 30%;
    pointer-events: none;
    border-radius: 120px 20px;
    opacity: 0.14;
    box-shadow: rgb(0 143 253) 20px 250px 300px;
    transform: rotate(15deg) translateY(-175%) translateZ(0px);
}

Hi Ying,

Thank you so much for the clear instructions. It worked!

Everyone on your support are so helpful. You really make me want to learn CSS, and I will.

Would you maybe be able to help me understand why the same thing doesn't work for the footer?

I've tried adding a hook to generate_before_footer, but the box just "pushes" the website further down and adds a scroll. Wondering why that doesn't happen to the first hook I added to the header as per your instructions.

Thank you for giving me something to fiddle with. I really appreciate it!

Hi Erman,

I tried the code and it seems to be working from my end.

Since it’s positioned absolute, it shouldn’t be pushing the “website down” or the other issues. Can you check if you’re adding the CSS correctly in this process as well? There may be a syntax error somewhere.

See this for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position#:~:text=elements%20is%20undefined.-,absolute,-The%20element%20is

Take note of this phrase: “It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.”

Trying it here would also be insightful: https://www.w3schools.com/css/css_positioning.asp#:~:text=has%20position%3A%20fixed%3B-,position%3A%20absolute%3B,-An%20element%20with

Once assured that the CSS code is working properly, can you try modifying the top value:

From top: 0px;

To:

top: 100%, top: 50%, top: 10%, or whatever value works for you.

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this clarifies. Kindly let us know how it goes. :)

Thank you for getting back to me, Fernando!

I can't seem to get it to work. I've added a link to the Private information to show how it currently looks (I've set it to a high opacity just to see it clearer).

It still pushes the website down.

The code I'm using is:

.gradient-footer {
    position: absolute;
    width: 60%;
    height: 260px;
    top: 70%;
    right: 10%;
    pointer-events: none;
    border-radius: 120px 20px;
    opacity: 0.94;
    box-shadow: rgb(0 143 253) 20px 250px 300px;
    transform: rotate(195deg) translateY(-175%) translateZ(0px);
}

And I've set the hook to generate_before_footer, but maybe that's wrong. I have tried the other hooks as well though.