CSS Opacity Gradient Top to Bottom Without Color?

user_712347 0
Viewed 2166

I want to make my div have gradient opacity. What I could find is how I can set it up with a color. But what if I don't want to have any color, so that the elements within would become transparent towards the bottom:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
linear-gradients opacity css
2 Answers

This is the purpose of mask

.box {
  font-size: 35px;
  display: inline-block;
  -webkit-mask: linear-gradient(#000, #0000);
          mask: linear-gradient(#000, #0000);
}
<div class="box">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:red;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:green;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>

user_86203330

You can create a gradient on the ::after pseudo-element that fades from transparent to white (or whatever background-color you want to use) and overlay it on the content in the div:

.g{
    width: 50vw;
    height: 50vh;
    position: relative;
    display:flex;
    align-items: flex-end;
}

.g::after{
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
<div class="g">
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum
</div>

user_8183260
Related