How can i do a multi-gradient background with 3 colors and a lot of curves?

Question

I need to realize a background like this in CSS:

For now I've done something similar, but of course is totally not the same thing:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div.divbg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#layer1 {
  background: #4F598A;
  z-index: 100;
}

#layer2 {
  z-index: 110;
  /*background-image: linear-gradient(90deg, rgba(186,52,41,0) 40%, rgba(186,52,41,1) 100%);*/
  background-image: linear-gradient(90deg, rgba(186, 52, 41, 0) 43%, rgba(186, 52, 41, 1) 51%);
  /*-webkit-clip-path: polygon(100% 0, 54% 1%, 48% 12%, 45% 24%, 45% 36%, 46% 52%, 48% 71%, 53% 93%, 75% 97%, 100% 81%, 100% 53%);*/
  /*clip-path: polygon(100% 0, 54% 1%, 48% 12%, 45% 24%, 45% 36%, 46% 52%, 48% 71%, 53% 93%, 75% 97%, 100% 81%, 100% 53%);*/
  /*-webkit-clip-path: polygon(51% 0, 50% 5%, 49% 12%, 49% 21%, 50% 35%, 52% 58%, 55% 82%, 59% 100%, 80% 100%, 100% 100%, 100% 0);*/
  /*clip-path: polygon(51% 0, 50% 5%, 49% 12%, 49% 21%, 50% 35%, 52% 58%, 55% 82%, 59% 100%, 80% 100%, 100% 100%, 100% 0);*/
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BA3429', endColorstr='#BA3429',GradientType=1 );*/
  /*box-shadow: inset 943px -164px 69px 100px #4F598A;*/
  /*background: red;*/
  opacity: 0.8;
}

#layer3 {
  z-index: 120;
  width: 100%;
  height: 50%;
  /*background: #000 !important;*/
  bottom: 0;
  content: '';
  z-index: 99999 !important;
  position: absolute;
  background-image: -webkit-linear-gradient(270deg, rgba(0, 255, 255, 0) 0%, rgba(94, 151, 73, 1) 100%);
  /*clip-path: polygon(65% 7%, 49% 76%, 2% 66%, 8% 9%, 33% 3%);*/
  /*filter: blur(20px);*/
}

<div class="divbg" id="layer1">&nbsp;</div>
<div class="divbg" id="layer2">&nbsp;</div>
<div class="divbg" id="layer3">&nbsp;</div>

codepen

Then, I tried to "cut" my gradient elements with clip-path, but of course this is totally worse:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div.divbg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#layer1 {
  background: #4F598A;
  z-index: 100;
}

#layer2 {
  z-index: 110;
  /*background-image: linear-gradient(90deg, rgba(186,52,41,0) 40%, rgba(186,52,41,1) 100%);*/
  background-image: linear-gradient(90deg, rgba(186, 52, 41, 0) 43%, rgba(186, 52, 41, 1) 51%);
  /*-webkit-clip-path: polygon(100% 0, 54% 1%, 48% 12%, 45% 24%, 45% 36%, 46% 52%, 48% 71%, 53% 93%, 75% 97%, 100% 81%, 100% 53%);*/
  /*clip-path: polygon(100% 0, 54% 1%, 48% 12%, 45% 24%, 45% 36%, 46% 52%, 48% 71%, 53% 93%, 75% 97%, 100% 81%, 100% 53%);*/
  /*-webkit-clip-path: polygon(51% 0, 50% 5%, 49% 12%, 49% 21%, 50% 35%, 52% 58%, 55% 82%, 59% 100%, 80% 100%, 100% 100%, 100% 0);*/
  clip-path: polygon(51% 0, 50% 5%, 49% 12%, 49% 21%, 50% 35%, 52% 58%, 55% 82%, 59% 100%, 80% 100%, 100% 100%, 100% 0);
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BA3429', endColorstr='#BA3429',GradientType=1 );*/
  box-shadow: inset 943px -164px 69px 100px #4F598A;
  /*background: red;*/
  opacity: 0.8;
}

#layer3 {
  z-index: 120;
  width: 100%;
  height: 50%;
  /*background: #000 !important;*/
  bottom: 0;
  content: '';
  z-index: 99999 !important;
  position: absolute;
  background-image: -webkit-linear-gradient(270deg, rgba(0, 255, 255, 0) 0%, rgba(94, 151, 73, 1) 100%);
  /*clip-path: polygon(65% 7%, 49% 76%, 2% 66%, 8% 9%, 33% 3%);*/
  /*filter: blur(20px);*/
}

<div class="divbg" id="layer1">&nbsp;</div>
<div class="divbg" id="layer2">&nbsp;</div>
<div class="divbg" id="layer3">&nbsp;</div>

codepen

I don't have any other idea to doing this.

Is there anything else that can I try?

Temani Afif · Answer 1 · 2019-05-31T15:46:03.760

0

I will consider this previous answer where I will add an extra layer above. You will have a bottom linear-gradient then above it an SVG shape where I also applied a gradient and above a radial-gradient that start from the bottom:

.container {
  width: 400px;
  height: 400px;
  background: 
    radial-gradient(100% 100% at bottom, #689140 20%, rgba(104, 145, 64, 0.55) 50%, transparent),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%234c5585" /><stop offset="100%" stop-color="%23894955" /></linearGradient></defs><path d="M32 64 C46 54 24 24 36 0 L0 0 L0 64 Z" fill="url(%23grad)" /></svg>') center/100% 100%, 
    linear-gradient(to right, #b33529 40%, #91454b);
  
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
  color:#fff;
}

<div class="container">
</div>

You can keep adding more layer either using linear-gradient, radial-gradient or the SVG by adjusting the shape and the gradient inside.

edited May 31 '19 at 15:46

answered May 31 '19 at 15:39

Temani Afif

245,468
26
309
415

Thank you very much! So do just i need to add many layers as i need? How can i do this SVG shape? Because as you can see from the image, is far more complicated than your code. Thank you in advance! – Kryuko Jun 11 '19 at 09:26
@Kryuko yes you can add as many layer as you want to *approximate* this. There is no direct way to obtain your image either with CSS or SVG but you can stack different kind of coloration using gradients and SVG to get it. – Temani Afif Jun 11 '19 at 10:17
thank you, but how can i do this svg? Is there any software to do that? – Kryuko Jun 12 '19 at 17:53
im still waiting for your reply, thank you in advance. – Kryuko Jun 18 '19 at 17:06
@Kryuko sorry missed your message. You can find a lot of tools to build SVG like https://inkscape.org/ or online ones to generate easy shapes like http://jxnblk.com/paths/ – Temani Afif Jun 18 '19 at 18:59

score -1 · Answer 2 · answered May 31 '19 at 15:38

-1

Make it simple, picture.

body {
    background-image: url(https://i.imgur.com/fUgGyru.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
}

answered May 31 '19 at 15:38

Vladimir Rodichev

351
1
11

How can i do a multi-gradient background with 3 colors and a lot of curves?

2 Answers2