CSS Crazy Gradient

Question

Had a strange request from a client asking for a background looking something like this:

But using different shades of one colour instead. Performance issues aside, is there any way of doing this with just CSS? As far as I'm aware CSS only works with linear and radial gradients and since this doesn't really fall into either category I'm not sure what else could be done.

I'd ideally like to avoid using an image, mainly for performance reasons

If anyone has any ideas, would love to hear them!

Answer 1

body {
  background: linear-gradient(to right, rgba(0,0,0,0), teal), linear-gradient(to right, rgba(255,0,100,.3), rgba(255,100,127,.2)), linear-gradient(to top right, yellow, rgba(0,0,0,0)), radial-gradient(closest-corner at 20% 80%, yellow, red);
  background-attachment: fixed;
}

I tried to get this as close as I could with just CSS, but the colors could definitely use some more vibrance. Good luck with the client!