HTML working. but not correctly

I’m using the following HTML for a gradient. In Preview, the gradient works. Now, how can I send this to the background and keep it in place?

For context, I’m pasting the HTML into the Page HTML Header area.

    <script src="" ></script>
    body {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
    #gradient-canvas {
        --gradient-color-1: #7b57df;
        --gradient-color-2: #7b57df;
        --gradient-color-3: #0090D2;
        --gradient-color-4: #FEFEDF;
    <canvas id="gradient-canvas" style="width:100vw;height:100vh;z-index:-1;"></canvas>
        var gradient = new Gradient()

Hi @deryck.
The problem is that this is not a pure HTML code, you are running js code. I think this is something you would need a plugin for (either a dedicated plugin that takes in the gradient colors as input and creates the gradient or there are some generic JS plugins in the marketplace that might help you achieve it). I would probably just create the plugin itself.

Good luck!

1 Like

@deryck I thought it was a nice exercise so I just did it and publish as a free plugin.
You can go ahead and install it Stripe Gradient Plugin | Bubble
or for it and do whatever you need to

Good luck!


Thank you so much for this, @eldad1! Excited to try this. Any tips/instructions for successful deployment?

@deryck it straight forward, install the plugin and that will add a gradient element to your available elements. Drag it to the page and adjust size so it will be the whole page.
I set up the page to the new responsive engine, and did many set and width/height
BTW the editor in the sample project is public , so you can just look at how I did it

Good luck

1 Like

@eldad1 I tried installing this and ran into a few issues. Perhaps you can help me (I’m sure it’s user error, on my part haha)

  1. I want to use this gradient as a background. Any suggestion for using this behind the rest of the page content?
  2. When I preview the page with this loaded, regardless of size settings, the page continues to scale vertically without end. Does that make sense? It just keeps growing, vertically

Hi @deryck, order and size of components is configurable, and you have a lot of options here.
This is what I did
I set the page itself as “Align to parent” and “Full width”:

I added the gradient element and gave it fixed width of 100% and Height as 1000px

I added some Text and just made sure it is on top (lower in the list)

This is the end result

Of course you can also use groups and other container layouts to adjust the view to your needs

1 Like

You’re the best. Figured out what I was doing wrong, thanks to you, @eldad1

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.