Throwing shapes!

Hey folks! Does anyone know how to create subtle background shapes that allow content to run over it? Like this page from webflow (

It’s the subtle grey shape that allows the title to flow over it.


On that page, a background image has been applied to the outer containing element. The text content is then positioned within that element, overlaying the background.

Hi Spirelli. Thanks for your message. So is it just like a Div that has been shaped and shaded and positioned over the section? Maybe through creating an oval div with shading then positioning content over it? Then as you say the text is inside another element place inside the section or overlapping div?

I headed across to and thought maybe that was a good way to do it. By transforming the position and placing the SVG inside of a larger div to create similar shapes throughout the website like this.


No, it’s a DIV with a background image applied to it.

That’s correct.

Simplest approach for myself would be to use a graphics software to create the shapes and then output them as images to use as background.
The background image in your example (eye shape) is a PNG format image with transparency.

I take it that’s created in adobe illustrator or something of sorts? I use adobe after effects and animation but not illustrator. I’ll have a look to see if there are any websites offering these types of shapes specifically for backgrounds.

Appreciate your help with this one.

That’s right. Illustrator is what I would use.

Thanks again. Appreciate all your help.