The solution is visible below:
As you can see it is just a matter of doing two things. First you have to render a linear gradient on the background. After that you have to finish it up by rendering another linear gradient (opposite direction!) while clipping it with a bow tie shape. That's it!
Note that it's a good idea to restore the context after doing some clipping on it. You often don't want to perform the same clip on the later operations.