CODEWITHSUNDEEP
htmlcssgradientlinear-gradients
RaxPat
RaxPat

Reputation: 311

linear-gradient on different angle

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?

Upvotes: 0

Views: 620

Answers (2)

Erblin Derguti
Erblin Derguti

Reputation: 45

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.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272598

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>

Upvotes: 1

Related Questions