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:
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>
Related Topics
Css Display: Inline VS Inline-Block
Any Way to Declare a Size/Partial Border to a Box
Why Does the Order of Media Queries Matter in Css
Remove White Space Below Image
Css to Select/Style First Word
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
How to Float 3 Divs Side by Side Using Css
Transparent Text Cut Out of Background
How to Prevent Less from Trying to Compile CSS Calc() Properties
How to Override Inline Styles With External Css
Difference Between Max-Device-Width and Max-Width For Mobile Web
Center Content in Responsive Bootstrap Navbar
How to Keep Two Divs on the Same Line