Css3 White to Transparent Gradient

White to transparent gradient with background image

I recommend Ultimate CSS Gradient Generator - ColorZilla.com

It's a well designed tool and there's a white to transparent preset.

The CSS code that it generates for a white to transparent gradient is this:

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

CSS3 White to Transparent Gradient

Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:

http://jsfiddle.net/fYz45/6/

Transparent to color gradient CSS issue

Try like this:

body {
    background: #000;
}

div {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    width: 100%;
    height: 100px;
}

Here is the Demo

CSS3 gradient rendering issues from transparent to white

I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

Instead of giving Chrome a "transparent" value, give it something very, very close to transparent. Hope this helps!

Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).

How to make a rectangular transparency gradient CSS3?

Unfortunately mask-image property (which i used in order to achieve elliptic ones) does not have rectangular-gradient option.

You can build it with multiple mask:

.foto_1 {

  -webkit-mask:

    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),

    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));

  mask:

    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),

    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));

  -webkit-mask-composite: source-in; /* For Chrome */

  mask-composite: intersect; /* For Firefox */

}

<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="Sample Image">

<img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="Sample Image">

How to apply equivalent of linear-gradient with opacity on edges of non-repeated image

move cover to only the image or it will get apply to gradient and will override the 5% 32px

div {

  width: 1000px;

  height: 1000px;

  background:

    linear-gradient(to bottom, #fff, transparent) top/100% 32px no-repeat,

    linear-gradient(to top, #fff, transparent) bottom/100% 32px no-repeat,

    url(https://picsum.photos/id/984/1000/1000) center/cover no-repeat;

}

<div></div>

CSS Opacity Gradient Top to Bottom Without Color?

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>

How to put gradient opacity in my gradient?

You can add a mask layer on the pseudo-element:

body {
  background: gray;
}

.bar {
  height: 50px;
  width: 100%;
  background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
  border-radius: 100rem;
  position: relative;
}

/** Stripes. */

.bar::before {
  content: "";
  position: absolute;
  border-radius: 100rem;
  height: 100%;
  width: 100%;
  background-size: 90px 100%;
  background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
  -webkit-mask:linear-gradient(white,transparent);
          mask:linear-gradient(white,transparent);
}

<div class="bar"></div>

Linear gradient across an image with transparency in CSS

Use the image as a mask then you can add background as coloration:

.box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}

img {
  display: block;
  width: 100%;
  opacity:0; /* no need to show the original image, it will simply define the size */
}

body {
  background: grey;
}

<div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

---

Related Topics