Css3 Transparency + Gradient

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>

CSS3 Transparency + Gradient

Yes. You can use rgba in both webkit and moz gradient declarations:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

(src)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(src)

Apparently you can even do this in IE, using an odd "extended hex" syntax. The first pair (in the example 55) refers to the level of opacity:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

(src)

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=""><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="">

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>

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.

CSS - Transparency Gradient on an Image

My solution to my problem is to simply state that this is not possible with the current technology. An alternative option would be to use a simple transparency gradient. Until A better solution arrises this is what I will end up doing.

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

Fade image to transparent like a gradient

If you want this:

enter image description here

You can do this:

<html>  <style type='text/css'>    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }    img {      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));    }  </style>  <body>    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>    <img src='https://i.imgur.com/sLa5gg2.jpg' />  </body></html>

Css3 Transparency + Gradient

How to put gradient opacity in my gradient?

CSS3 Transparency + Gradient

How to make a rectangular transparency gradient CSS3?

CSS Opacity Gradient Top to Bottom Without Color?

CSS Creating Opacity Gradient

CSS - Transparency Gradient on an Image

Fade image to transparent like a gradient

Related Topics

Leave a reply