Young changing linear-gradiente
to radia-gradiente
I was able to reach a result very close to the image. I also used 4 colors and not 2, starting from the top of the box on the right.
The gradient CSS looks like this:
background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 );
See the result:
.box {
margin-top: 100px;
background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 );
width: 100%;
height: 300px;
-webkit-transform: skewY(-1.5deg);
-moz-transform: skewY(-1.5deg);
-ms-transform: skewY(-1.5deg);
-o-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
}
<div class="box">
<div class="wrapper">
</div>
</div>
OBS: The bigger the BOX, the thinner the gradient and the color transition will be, the narrower the BOX, the more noticeable the color transition will be. >
EDIT: Variation with Two Gradients, one linear
and another radial
, one above the other with mix-blend-mode: overlay;
.
According to your comment in my answer it is mix-blend-mode: overlay;
that will give the "saturated" tone both at the top of the gradient and at the bottom. But to do this I had to create another element above the gradient, because to use bland-mode
I need to separate the backgrounds
, you could not use the two in one element.
See how you got on the Snippet below
.bgc {
position: relative;
background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 ) ;
width: 100%;
height: 300px;
-webkit-transform: skewY(-1.5deg);
-moz-transform: skewY(-1.5deg);
-ms-transform: skewY(-1.5deg);
-o-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
}
.filtro {
width: 100%;
height: 300px;
background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(0,0,0,0),rgba(0,0,0,0.4));
background-size: cover;
position: absolute;
top: 0;
right: 0;
mix-blend-mode: overlay;
}
<div class="bgc">
<div class="filtro"></div>
</div>
You can go to work with the transparencies of linear-gradiente
, until you get to do not have what you think is ideal.