Css3 Opacity Gradient

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>

CSS Creating Opacity Gradient

This is not possible without specifying the colour to transition into. What you could do is use rgba() to define a color and then also its opacity, but only affecting the opacity itself is not possible. An example of a gradient you'd get when using rgba() would be:

background: linear-gradient(to bottom,  rgba(255, 255, 255, 1) 0%, rgba(233, 233, 233, 0) 100%); /* W3C */

that would transition between the two specified colours, going from completely transparent at the #e9e9e9 (which is the same as rgba(233, 233, 233, 1)) to completely opaque at the white. Again, this is an alternative to what you actually want, but transitioning opacity only is not possible.

PS: you can also transition translucent colours in older IE versions using #AARRGGBB format.

How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS

You can consider mask to do this. You can specify the same properties as background thus you can easily define your gradient.

.box {  width: 1000px;  height: 1000px;  position:relative;  z-index:0;}.box:before {  content:"";  position:absolute;  z-index:-1;  top:0;  left:0;  right:0;  bottom:0;  background:url(https://picsum.photos/id/42/10/10);  -webkit-mask-image:linear-gradient(to top, transparent, #fff, transparent);  mask-image:linear-gradient(to top, transparent, #fff, transparent);}

<div class="box">hello</div>

Making divs opacity change like a linear-gradient

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%);
}

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>

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">