CSS - Linear gradient transparency on both side of image

Question

tl;dr

Is there any way to add transparency to images in CSS with -webkit-linear-gradient on left, and right side of the image?

Long Version

I have an image I want to add transparency - with pure CSS - on both side of it avoiding using any image editor like Photoshop, Gimp, etc. I have tried to use -webkit-linear-gradient but it uses rgba() function to define color stops.

So this snippet

height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

does this:

enter image description here

In this example the last parameter in the rgba() defines the transparency of the color. So far so good. If I put right in the -webkit-linear-gradient the image above would show the opposite. (You don't say?!)

I want somehow to merge the two, and create a gradient that goes to transparent on both side. Only not with gradient. With an image.

I also tried to work around with box-shadow and radial-gradient but I couldn't figure it out.

Is there any possible way to add transparency on left, and right side of an image using only CSS?

EDIT:

Example: enter image description here

Not sure I'm quite getting it... do you just want three color stops? — BoltClock, Feb 09 '15 at 12:08
Nope, I want an image fading on both sides into transparency. — balintpekker, Feb 09 '15 at 12:08
Never mind, I get it. Side note, linear gradients are standardized and use a different syntax than the one you're using right now. — BoltClock, Feb 09 '15 at 12:10
I added an example above. If not with `-webkit-linear-gradient`, then is there any way to do it? — balintpekker, Feb 09 '15 at 12:12

score 33 · Accepted Answer · answered Feb 09 '15 at 12:28

You could use a wrapper div and then use color stops:

div {
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}

<div>
  <img src="http://placekitten.com/g/300/300" alt="" />
</div>

Resources

1 * Gradient Generator

My God man, who comments under the line of code? Jk, thanks for the answer. — ModusPwnens, Oct 14 '22 at 02:25

Ajeeli · Answer 2 · 2020-06-30T09:51:37.313

7

Late answer but others can make use of it. You can put a gradient with transparency on both sides with just one line:

background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 1), rgba(0, 0, 0, 0))

edited Jun 30 '20 at 09:51

answered Jun 30 '20 at 09:36

Ajeeli

325
1
3
16

score 4 · Answer 3 · answered May 13 '20 at 16:47

Use the mask-image and -webkit-mask-image property, not background:

img
{
  mask-image: /*same as -webkit-mask-image*/
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

The above code puts color stops at 0, 10, 90, and 100 percent, leaving 10% of each side of any img tag semi-transparent. The mask-image property only uses the alpha channel, you can use any color you want for the non-transparent parts.

score -1 · Answer 4 · answered Jun 28 '19 at 00:17

.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }

<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

One way I've found to do this is to use pseudo classes and to stack them on top of each other. Make sure that the image container is relatively positioned and it should work for you (see example).

score -2 · Answer 5 · answered Jul 16 '20 at 04:47

.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }

<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

CSS - Linear gradient transparency on both side of image

tl;dr

Long Version

EDIT:

5 Answers5