Diagonal stripe background for modern website


Who knows how to create a striped background like on this site with bubble: https://flinks.io or https://stripe.com As far I know, you can only create vertical or horizontal pattern with gradient in bubble.

If it can’t be done in bubble, any idea about a tool which can allow me to do that?

I know it can be done by playing with CSS but you be able to integrate to a bubble site afterwards.



It can be done with a radial gradient.

So far I was able to create vertical or horizontal stripes with gradient. I am more interested with diagonal stripes.

@emmanuel, I played with the radial gradient shape (ellipse and circle), gradient base and x and y center position, I was not able to obtain the desired layout.

Any examples?

I am looking a diagonal stripes like in the websites shown above.

Can someone help me?


Hi @simoclovis-web

This might help you:

It gives you a diagonal gradient, but not the ‘multi-shapes’ diagonal gradient (ie the “stripes”) as in your 2 examples.
Never tried to do that but in case you can’t succeed in Bubble, I’d create it in https://www.draw.io/ (create your multiples shapes, apply gradients, reorientate, etc.) and then import it in Bubble .
Quick uggly example: