Photoshop Question posted in
The official user guide can be found here.

CSS – Linear gradient transparency on both side of image – Photoshop

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

Tags:

5

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    .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).

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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))
    Login or Signup to reply.
  5. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search