Making divs opacity change like a linear-gradient

Question

I'd like a divs opacity to decrease in direction left, top, right or down just like a linear-gradient does it in the background-image, but just for the whole appearance (not just the background). Is there any way of doing it?

I've tried doing it with this code:

html

<body>
    <div id="outer">
        <div id="content">
            <!-- content -->
        </div>
        <div id="inner">
        </div>
    </div>
</body>

css

#outer {
    height: 500px;
    width: 500px;
    padding-left:20px;
}

#inner {
    position: absolute;
    height: 500px;
    width: 500px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
    z-index: 999;
}

#content {
    position: absolute;
    height: 500px;
    width: 500px;
}

As expected it worked really well with colors, but now I'd like to insert an image as background of the body and obviously it won't work like this, how would any of you do this?

Edit:
Some of you marked it as a duplicate of css gradient opacity slide image left to right color white but It's not the same;
I'm not talking about making the background-image get a linear-gradient over it, I'm talking about making a part of the whole div disappear like a gradient.

Possible duplicate of [css gradient opacity slide image left to right color white](https://stackoverflow.com/questions/45295942/css-gradient-opacity-slide-image-left-to-right-color-white) — Ryan, Jun 14 '19 at 18:24
Please check this https://stackoverflow.com/a/2547064/5146848 — Sifat Haque, Jun 14 '19 at 18:30
@Ryan no, I don't think so, I saw that one; they try to fill it and I try to empty it — Tim T., Jun 14 '19 at 18:30
@SifatHaque I checked this too, They talk about two different backgrounds, but I talk about making the opacity decrease with the width of the div — Tim T., Jun 14 '19 at 18:32
Please move your code from the fiddle to your actual question. Please see [mcve]. — zero298, Jun 14 '19 at 18:36

score 6 · Accepted Answer · answered Jun 14 '19 at 18:42

6

Use a mask:

.mask {
  -webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
  mask-image: linear-gradient(to left, transparent 30%, black 100%);
}

answered Jun 14 '19 at 18:42

Khobalt

486
4
9

Making divs opacity change like a linear-gradient

1 Answers1