-1

I am trying to recreate this gradient background in CSS:

Gradient Background

What I have attempted is the following:

background: radial-gradient(circle at 90% 100%, var(--yellow) 0%, rgb(var(--gradient-blend)) 30%),
              radial-gradient(circle at 100% 90%, var(--blue), rgb(var(--gradient-blend)));

Though, this only displayed the following:enter image description here

What do I need to change to make the blue gradient appear?

Charlie Schliesser
  • 7,851
  • 4
  • 46
  • 76
Pol
  • 39
  • 9
  • The variables are the colors you see in the images (and they are all valid) – Pol Feb 21 '23 at 00:14
  • 1
    Does this answer your question? [How to apply multiple css radial gradients to a single element](https://stackoverflow.com/questions/10677429/how-to-apply-multiple-css-radial-gradients-to-a-single-element) – pilchard Feb 21 '23 at 00:20
  • also [How to create a website background with double radial gradients blended together](https://stackoverflow.com/questions/74632645/how-to-create-a-website-background-with-double-radial-gradients-blended-together) – pilchard Feb 21 '23 at 00:21
  • 2
    The key in both anwers is applying `transparent` to each gradient so that the others can show through. Also a very nice generator, and excellent css resource in general [joshwcomeau: Gradient Generator](https://www.joshwcomeau.com/gradient-generator/) – pilchard Feb 21 '23 at 00:26
  • Thanks for the links, but they don't apply the transition gradient (the dark blue). I guess I want to apply a background to the background? – Pol Feb 21 '23 at 00:36
  • 1
    They do apply to it, but your circles are overlapping `circle at 100% 90%` should be `circle at 0% 10%` or some such to draw the blue in the top left corner, and you need to add a `transparent` section to the end of the yellow gradient in order for the blue to show through. see [Reproduce a complex gradient in CSS](https://stackoverflow.com/questions/65564098/reproduce-a-complex-gradient-in-css) for another example – pilchard Feb 21 '23 at 00:48

1 Answers1

2

Don't forget that background is just shorthand. That means that you can stack background-images on top of a background-color.

div {
  background-color: black;
  background-image: 
  radial-gradient(circle at top left, blue 0%, transparent 50%),
  radial-gradient(circle at bottom right, yellow 0%, transparent 50%);
  height: 100vh;
}
<div></div>
jme11
  • 17,134
  • 2
  • 38
  • 48