Transparent (opacity) image from top 0% to bottom 100% in CSS

Question

Its possible do it? Just in CSS, like this picture, so I mean if I put on <div> tag background image, I need it to be transparent from top to bottom.

I want to create something similar to the image below:

enter image description here

Not really a possibility with CSS AFAIK. In fact, I don't think it's possible to reproduce that exactly at all (especially if the top of the img is actually transparent)...at least not without a lot of unnecessary extra HTML & CSS. Sometimes an image is the best way. — Paulie_D
– Paulie_D, Commented May 21, 2014 at 11:01
If you just need the 'transparency' to be from white to the image...it's a little easier...would that do? — Paulie_D
– Paulie_D, Commented May 21, 2014 at 11:06

web-tiki · Accepted Answer · 2014-05-21 19:03:18Z

As other answers state : making the image transparent from top to bottom is not possible in CSS.

BUT

If you have a solid background color (or similar) you can simulate that transparency whith CSS3 inset box-shadows.
For the image white overlay and the semi transparent black rectangle. In the following demo, I used pseudo elements to minimize HTML markup.

DEMO

Output :

Simulated transparency over image with CSS3 inset box shadows

HTML :

<div class="image"></div>

CSS :

.image{
    position:relative;
    height:500px;
    width:500px;
    margin:50px auto;
    background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');
    background-size:cover;
    -moz-box-shadow: inset 0px 850px 500px -500px #fff;
    -webkit-box-shadow: inset 0px 850px 500px -500px #fff;
    -o-box-shadow: inset 0px 850px 500px -500px #fff;
    box-shadow: inset 0px 850px 500px -500px #fff;
}
.image:before,.image:after{
    content:'';
    position:absolute;
    left:5%;
    opacity:0.5;
}
.image:before{
    top:0;
    width:20%;
    height:100%;
    -moz-box-shadow: inset 0px 850px 500px -500px #000;
    -webkit-box-shadow: inset 0px 850px 500px -500px #000;
    -o-box-shadow: inset 0px 850px 500px -500px #000;
    box-shadow: inset 0px 850px 500px -500px #000;
}
.image:after{
    width:20%;
    height:10%;
    top:100%;
    background:#000;
}

anderooni · Accepted Answer · 2014-05-23 05:01:38Z

6

Actually, you can do this in webkit! Mozilla allows for SVG masks, but I won't get into that. Zero support in IE.

Demo: JSFiddle

HTML:

<div>
    <img src="http:/www.fillmurray.com/300/200"/>
</div>

CSS:

div {
  -webkit-mask-size: 300px 200px;
  -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, 
  color-stop(0.00,  rgba(0,0,0,0)),
  color-stop(1.00,  rgba(0,0,0,1)));
}

Reference: http://caniuse.com/css-masks

answered May 23, 2014 at 5:01

anderooni

1162 bronze badges

1 Comment

Kaiido Over a year ago

This answer could benefit from an update since all modern browsers do support (-webkit-)mask-image: linear-gradient() nowadays. jsfiddle.net/19ps6vry

Xweque · Accepted Answer · 2014-05-21 11:15:29Z

I made a fiddle for you to use. You have to use gradients with rgba. This is not supported in all browsers so you might want to manipulate the image instead. This however is the only way to do it in CSS.

Here's the code:

HTML:

<html>
    <head>
    </head>
    <body>
        <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" />
        <div class="whatever"></div>
    </body>
</html>

CSS:

body {
    margin:0px;
}

img {
    height:30px;
    position:relative;
}

.whatever {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #ff00ff),
        color-stop(1, rgba(0,0,0,0))
    );
    background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    height:30px;
    position:relative;
    width:100px;
    top:-34px;
}

Jaykumar Patel · Accepted Answer · 2014-05-21 11:15:44Z

1

You should use background CSS property with linear-gradient value set by your self for your requeirement.

CSS

background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%);

Check this `Demo jsFiddle Example`

answered May 21, 2014 at 11:15

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Comments

Paulie_D · Accepted Answer · 2014-05-21 11:17:18Z

1

I don't think it's possible to reproduce that exactly at all (especially if the top of the img is actually transparent). If you just need the 'transparency' to be from white to the image...it's a little easier..

JSfiddle Demo

HTML

<div class="wrapper">
    <div class="imgwrap">
    <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" alt=""/>
    </div>
</div>

CSS

body {
    background-color: #bada55;
}

.wrapper {
    height:240px;
    display: inline-block;
    margin: 25px;
    border:1px solid grey;
    background-color: white;
    padding:8px;
}

.imgwrap {
    display: inline-block;
    position: relative;
}

.imgwrap:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
    z-index:1;

}

answered May 21, 2014 at 11:17

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

Paulie_D Over a year ago

Same difference. you can't make something transparent that isn't transparent to start with.

Tom Fink · Accepted Answer · 2016-03-24 11:26:37Z

Overlay a gradient div over the image with position absolute and z-index:

CSS

section{
    margin:0px 0px;
    padding:0px 0px;
    width: 300px;
    display:block;
    height: auto;
    position:relative;
}
section #overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
width:100%;
height:100%;
z-index:2;    
}
section #imgContainer{
    width: 300px;
    height: auto;
    margin: 0px 0px;
    padding: 0px 0px;
    overflow: hidden;
    display: inline-block;

}
section #imgContainer img{
    width: 300px;
    padding: 0;
    margin: 0;
    display: block;

}

HTML

  <section>
        <div id="overlay">
        </div>
        <div id="imgContainer">
           <img src="" />
        </div>
    </section>

Arturito12 · Accepted Answer · 2024-12-02 19:37:51Z

0

Pretty old discussion, but come up with the same problem recently. You just need to create 2 containers. Outer container should contain your bg image and the inner one will contain the gradient(white to transparent in this case):

 .outer-container {
  min-height: 100vh; 
  width: 100%;
  background-image: url('/images/home_bg.png');
  background-size: cover;
}

.inner-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.996) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

and the div structure will be like this:

<div class="outer-container">
  <div class="inner-container">
</div>
</div>

answered Dec 2, 2024 at 19:37

Arturito12

11 bronze badge

Collectives™ on Stack Overflow

Transparent (opacity) image from top 0% to bottom 100% in CSS

7 Answers 7

Comments

1 Comment

Comments

CSS

Check this `Demo jsFiddle Example`

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

CSS

Check this Demo jsFiddle Example

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Check this `Demo jsFiddle Example`