Can you create gradients that fade to opacity using CSS or JavaScript?

Question

WebKit has introduced the ability to create CSS gradients. For example, with the following code:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

However, is it possible to have an opacity gradient using CSS? I want the gradient to be a single color on one side, and fade to zero opacity on the other.

Cross-browser compatibility isn't important; I just need it to work in Google Chrome.

Is there some way to do this using CSS? If not, can something similar be done using JavaScript (not jQuery)?

Thanks for your help.

score 23 · Accepted Answer · edited Mar 19 '13 at 12:13

23

Yes

for the colors, use rgba(x, y, z, o) where o is the opacity

should work

e.g.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

Edit: For the final value (opacity) 1 is opaque & 0 is transparent

edited Mar 19 '13 at 12:13

Chuck Le Butt

47,570
62
203
289

answered Dec 19 '10 at 00:16

Jasper

493
3
9

1

You probably meant (255, 255, 255, 1) for the first value. – Arseni Mourzenko Dec 19 '10 at 00:31
1

code doesnt actually work, appears to be missing commas and brackets – Toby Hede Dec 06 '11 at 05:37

score 16 · Answer 2 · answered Dec 19 '10 at 01:00

16

Yup, rgba(red, green, blue, alpha) is what you should use http://www.w3.org/TR/css3-color/#rgba-color, example (Try it out on jsFiddle):

/* Webkit */
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);

answered Dec 19 '10 at 01:00

antonj

21,236
6
30
20

Thanks for the lovely fiddle! – KajMagnus Nov 05 '11 at 11:36
Create an svg gradient and base64 encode it `background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyPC9saW5l...3N2Zz4g');` – antonj Jun 12 '14 at 12:46

oezi · Answer 3 · 2010-12-19T02:10:50.507

2

not tested, but this should work (in FF this works (with a different syntax) - i'm not sure if safari/webkit knows rgba):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));

edited Dec 19 '10 at 02:10

answered Dec 19 '10 at 00:14

oezi

51,017
10
98
115

I might've misunderstood something, but why would you expect a `-webkit` vendor-prefixed property to work in Firefox? (`-webkit` applies to Chrome and Safari, and one or two others; `-moz` is for Firefox; `-o` is Opera; `-ms` is, apparently, IE...) – David Thomas Dec 19 '10 at 00:44
thanks for the hint, i've edited that... i just forgot to write some text (thats what happens if you drink alcohol while sufing on stackoverflow on sunday evening -.-') – oezi Dec 19 '10 at 02:12

Can you create gradients that fade to opacity using CSS or JavaScript?

3 Answers3

Linked