Today I was designing a transparent PNG background that would only sit in the top left of a div, and the rest of the div would maintain a gradient background for all transparent areas of the PNG, and the rest of the div itself. It might be better to explain through the code I thought might work:
What I’ve been finding is that most browsers pick one or the other — most choosing the gradient since its further down the CSS file. I know some of the guys around here will say «just apply the gradient to the PNG you’re making» — but thats not ideal because the div will maintain a dynamic height — sometimes being very short, sometimes being very tall. I know this gradient isn’t essential but I thought it might be worth asking y’all what you thought. Is it possible to have a background image, while keeping the rest of the background as a gradient?
6 Answers 6
Keep in mind that a CSS gradient is actually an image value, not a color value as some might expect. Therefore, it corresponds to background-image specifically, and not background-color , or the entire background shorthand.
Essentially, what you’re really trying to do is layering two background images: a bitmap image over a gradient. To do this, you specify both of them in the same declaration, separating them using a comma. Specify the image first, followed by the gradient. If you specify a background color, that color will always be painted underneath the bottom-most image, which means a gradient will cover it just fine, and it will work even in the case of a fallback.
Because you’re including vendor prefixes, you will need to do this once for every prefix, once for prefixless, and once for fallback (without the gradient). To avoid having to repeat the other values, use the longhand properties 1 instead of the background shorthand:
Unfortunately this doesn’t work correctly in IE as it uses filter for the gradient, which it always paints over the background.
To work around IE’s issue you can place the filter and the background image in separate elements. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers, but that’s a trade-off you’ll have to make. If you don’t need to support versions of IE that don’t implement standardized CSS gradients, you have nothing to worry about.
1 Technically, the background-position and background-repeat declarations apply to both layers here because the gaps are filled in by repeating the values instead of clamped, but since background-position is its initial value and background-repeat doesn’t matter for a gradient covering the entire element, it doesn’t matter too much. The details of how layered background declarations are handled can be found here.
I would like to create effect like on this image — gradient opacity on the bottom of content: How can i do it?
6 Answers 6
Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text Loriem ispsum is simply dummy text
in the HTML and ‘position’ spelled incorrectly in the .content css rule.
I know this is older but JIC someone finds this looking for a solution. The accepted answer from Love Trivedi is good but still has a few problems. Using absolute positioning is ok but to cover the div; it’s suggested to also use top: 0px and right: 0px. there are also extra zeros in the filter , the start should be startColorstr=’#89fff1′ to stay consistant with the other starting colors.
There are also 2 downsides to this solution. First it doesn’t allow for selecting the underlying text so you would need a pointer-events: none; in the gradientback class to allow selecting the text. The second problem is this solution fades to a color so you have to be sure your second color matches the page background to get the desired effect. This uses an overlay DIV so fading that to transparent wouldn’t do anything to the visual of the content DIV.
here is an updated jsfiddle with the suggested changes and a link on the first text line so you can test the pointer-events option.
A more modern solution would be to use the CSS3 mask-image. jsfiddle example for solution 2.
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent)); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent)); mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
it has less support for older browsers but actually fades the container to transparent allowing for any variety of page backgrounds while still maintaining the desired effect.
here is updated HTML for the first solution in case jsfiddle gives you problems
ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text and the modern solution. You don't need the inner DIV, just add the mask-image lines to the content class.
body < background: #000; >.content ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text Loriem ispsum is simpaly dummy text
RGBA is extremely fun, and so is -webkit-gradient , -moz-gradient , and uh. progid:DXImageTransform.Microsoft.gradient . yeah. 🙂 Is there a way to combine the two, RGBA and gradients, so that there’s gradient of alpha transparency using the current/latest CSS specs.
7 Answers 7
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) );
/* mozilla example - FF3.6+ */ background-image: -moz-linear-gradient( rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95% );
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 );
i’d like these to work in standard css, too, but with the alpha at the end (seems more natural): #0001 would be short hex for “almost transparent black” and #ffcc00ff would be the same as #ffcc00 , i.e. “completely opaque tangerine yellow”
also check out the CSS3 Gradient Generator over at Colorzilla which has a bunch of nice presets and all the cross browser compatible variations to achieve your desired gradient
nevermind, i’ve just found it 😉 background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
New syntax has been supported for a while by all modern browsers (starting from Chrome 26, Opera 12.1, IE 10 and Firefox 16): http://caniuse.com/#feat=css-gradients
This renders a gradient, starting from solid black at the top, to fully transparent at the bottom.
background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); // for left to right gradient background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); // for right to left gradient
This is some really cool stuff! I needed pretty much the same, but with horizontal gradient from white to transparent. And it is working just fine! Here ist my code:
I found this in w3schools and suited my needs while I was looking for gradient and transparency. I am providing the link to refer to w3schools. Hope this helps if any one is looking for gradient and transparency.
Also I tried it in w3schools to change the opacity pasting the link for it check it
The following is the one that I’m using to generate a vertical gradient from completely opaque (top) to 20% in transparency (bottom) for the same color:
I am trying to create a class to apply to elements which will give them a gradient using CSS. The problem is that I want a class that contains NO COLOR- only opacity from 1.0 to 0. This way, I can «lay» it down on top of any element with any color and it will give it a gradient, basically starting with the original color and fading to white.
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:
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.
