CSS3 Transparency + Gradient

Question

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.

@geo1701's comment should become the accepted one, as it is more relevant to the modern standards. — Dmytro Shevchenko, Jan 26 '16 at 13:43

score 329 · Accepted Answer · edited Jun 16 '12 at 16:08

329

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)

edited Jun 16 '12 at 16:08

umassthrower

1,307
1
11
15

answered Feb 19 '10 at 03:46

Owen

82,995
21
120
115

20

FYI, "extended hex" is just 32-bit ARGB instead of 24-bit RGB color values. – Macke Aug 24 '11 at 12:09
2

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” – flying sheep Aug 30 '11 at 10:26
56

also check out the [CSS3 Gradient Generator over at Colorzilla](http://www.colorzilla.com/gradient-editor/) which has a bunch of nice presets and all the cross browser compatible variations to achieve your desired gradient – andrhamm Nov 23 '11 at 16:16
so, i've checked it out, works on all major browsers but it doesnt work on opera, any clue? – WhoSayIn Feb 07 '12 at 09:18
nevermind, i've just found it ;) `background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));` – WhoSayIn Feb 07 '12 at 09:26
If anyone's interested, there was a [suggested edit](http://stackoverflow.com/review-beta/suggested-edits/209885) here (which I rejected), showing how it could also be done in Opera. – Benjol Aug 10 '12 at 10:24
You can use [this table of Hex values and percentages](http://online.sfsu.edu/chrism/hexval.html) to figure out the hex value for the percentage of opacity you want. – user664833 Feb 04 '13 at 18:19
I could not seem to make this work in IE8 wherein I will combine (opacity) alpha with gradient. I use gradient to avoid the black shadows of a transparent png image. `filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF)";` – user2567536 Apr 02 '14 at 12:24

score 108 · Answer 2 · edited Jan 26 '16 at 13:41

108

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

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

This renders a gradient, starting from solid black at the top, to fully transparent at the bottom.

Documentation on MDN.

edited Jan 26 '16 at 13:41

Dmytro Shevchenko

33,431
6
51
67

answered Jan 30 '13 at 17:03

George Filippakos

16,359
15
81
92

9

.. creates solid black at the top to fully transparent at the bottom – commonpike Feb 09 '14 at 19:43
I assume this is a suggestion and doesn't actually work? – bart Jul 02 '15 at 19:32
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 – Viraj Singh Feb 04 '21 at 13:39

score 15 · Answer 3 · answered Sep 10 '10 at 08:05

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:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

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

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

The IE7 and IE8 gradients don't specify any alpha color? Do they really fade to transparent? — KajMagnus, Nov 05 '11 at 11:44
for reference, on the Microsoft implementation, gradientType=1 is horizontal, 0 is vertical. — Brooks, Jun 10 '11 at 21:56

score 3 · Answer 4 · answered May 06 '13 at 14:18

Here is my code:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

score 3 · Answer 5 · edited Apr 13 '14 at 10:50

#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

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.

http://www.w3schools.com/css/css3_gradients.asp

Also I tried it in w3schools to change the opacity pasting the link for it check it

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Hope it helps.

Riccardo Volpe · Answer 6 · 2019-06-04T15:58:05.370

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:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

score 0 · Answer 7 · answered Dec 20 '14 at 21:41

I just came across this more recent example . To simplify and use the most recent examples, giving the css a selector class of 'grad',(I've included backwards compatibility)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

from https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

CSS3 Transparency + Gradient

7 Answers7

Linked