CODEWITHSUNDEEP
cssgradient
Alok Kumar
Alok Kumar

Reputation: 114

CSS Crazy Gradient

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

enter image description here

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!

Upvotes: 2

Views: 2161

Answers (1)

StardustGogeta
StardustGogeta

Reputation: 3406

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!

Upvotes: 12

Related Questions