Complex shapes on a gradient background

Hello, everyone!
I’m a bit new to Webflow. Could you please tell me how best to make such widget shapes on a gradient background?

I know how to create them on a white background, just rounding the corners with a white shadow of the small squares (near the arrow). But is there any way to make them responsive on a gradient background? I’d be grateful for your answers

Hi Anastasia

To keep it easy, I would design this is Figma and export it as a SVG, then set is as a background of a div. After that, create two divs inside (one for the heading and one for the body) with different paddings on the right side. The first one about 20% and the second one with, let’s say, 5%; this is to prevent the heading from overflowing the background image.