1

I want to create a multi colored "free flow" CSS gradient background. It should look something like this:

Gradient I want to achieve

It seems I need to use a background blend mode. For example screen:

background-blend-mode: screen;

The gradient has five colors:

Five colors - A - E

A: #ecedee B: #fff0be C: #fbdce7 D: #e2fae1 E: #d3d5ed

The closest solution I can find is the "Spectrum background" in this blog post

.spectrum-background {
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

But I am not sure how I can add more colors and position them like on the attached image. I hope someone can help.

Morten Vestergaard
  • 27
  • 1
  • 5

1 Answers1

1

You can certainly add more gradients and colors but the tricky part with blend-mode: screen is that it becomes white wherever opaque colors overlap.

I found it much easier to work with just gradients, without blending. Here's what I could come up with to match your desired result:

.spectrum-background {
    width: 500px;
    height: 1000px;
    background:
        linear-gradient(150deg, #ecedee, transparent 30%),
        linear-gradient(330deg, rgb(210, 206, 242), transparent 30%),
        linear-gradient(225deg, #fff0be, #fbdce7, #e2fae1, powderblue);
}
<div class="spectrum-background"></div>

It's not perfectly identical but something you can play with further.

drak
  • 302
  • 8