linear-gradient on different angle-CodePudding

I want to archive a background linear-gradient (to right, from light pink to red) and fade out vertically (to bottom, to white color or opacity to 0), but it seems it's not possible to do it by using css linear-gradient.

background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));

any ideas how to archive this kind of effect without using static image?

CodePudding user response：

You need mask:

.box {
  height:100px;
  position:relative;
  border:1px solid;
}

.box:before {
  content:"";
  position:absolute;
  inset:0;
  -webkit-mask:linear-gradient(#000,#0000);
  background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
}

<div class="box"></div>

CodePudding user response：

If you want to achieve a background gradient from light pink to red and then fade out on bottom.

This might help you.

.divX {
    position: relative;
    z-index: 0;
    background: linear-gradient(to right, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
    /* Ignore these below */
    width: 100%;
    height: auto;
    min-height: 150px;
    }

.divX::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgb(255 255 255));
}
.divXcontent {
    position: relative;
    z-index: 3; 
}

<div class="divX">
    <div class="divXcontent">
        <h1>test test</h1>
    </div>
</div>

Then add another div inside .divX and set position:relative and z-index to 3, for the content to be on top of everything.