Gradient from transparent to color in CSS

Question

My Boss give me an image (please see below) and told him I would make his site look the same. Here is my code, but it doesn't look like the image:

HTML

<div class="clearfix" id="footer">
  <ul>
    <li><a href="/pages/facility">Become a Virtual Active Facility</a></li>
    <li><a href="/pages/about">About Us</a></li>
    <li class="last"><a href="/pages/contact">Contact</a></li>
  </ul>
</div>

CSS

#footer {
    background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent;
    margin-bottom: 25px;
    margin-top: 25px;
    opacity: 0.6;
    padding: 10px 25px;
    width: 914px;
}

alt text

How can I get the result to look the same?

I don't understand what you mean? `opacity` should do it in many browsers. What exactly is your question? — Pekka, Nov 12 '10 at 10:25
Why not just make the transparent bar in an image creator program? — Kyle, Nov 12 '10 at 10:26
@Pekka I think he wants a transparent gradient that starts with nothing and ends in white. — Kyle, Nov 12 '10 at 10:27
@Pekka: Kyle Sevenoaks explain for me. Thanks Kyle Sevenoaks — khanh, Nov 12 '10 at 10:33
@Kyle make that an answer, that is the best solution I think (because CSS gradients don't work cross-browser yet) — Pekka, Nov 12 '10 at 10:34

Peter · Accepted Answer · 2016-07-17T23:01:14.070

16

Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.

In the final 2014 syntax:

background-image: linear-gradient(to right, transparent, white);

Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.

edited Jul 17 '16 at 23:01

answered Nov 12 '10 at 10:44

Peter

2,874
2
31
42

This will work on Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0 and up, since it's Mozilla-specific code. His only problem was that the code didn't do what he wanted, so I am not assuming he needs help in making it cross-browser. If it needs to work on all browsers, he has another problem coming because not all webbrowsers are graphic to begin with... – Peter Nov 12 '10 at 11:55
1

@KevinCampion that's because it was non-final syntax which has changed. I've updated the answer to use the final 2014 syntax. – Peter Jul 17 '16 at 23:02
I'd add that some browsers do not pre-multiply alpha channel... and what does this mean? That transparent areas (which have color, but alpha channel at 0%) actually leak their colors. `transparent` is actually `rgba(0, 0, 0, 0)` (transparent black), and the result is some black leaking on the transparent edge (the left edge). **The bottom line: for the effect the OP expects, I'd rather use `rgba(255, 255, 255, 0)` (transparent white).** – rslemos Dec 10 '20 at 13:47

score 3 · Answer 2 · answered Nov 12 '10 at 10:47

3

try it:

background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;

answered Nov 12 '10 at 10:47

rgba255

41
2

score 1 · Answer 3 · edited May 23 '17 at 10:30

1

You need to use alpha (rgba) look at that, may help you: CSS3 Transparency + Gradient

edited May 23 '17 at 10:30

Community

1
1

answered Nov 12 '10 at 10:45

Hannes

8,147
4
33
51

score 0 · Answer 4 · answered Jan 19 '12 at 07:33

This one works for me

background: -moz-linear-gradient(
                left,
                rgba(0,0,0,0.001) 0%,
                rgba(201,201,201,1) 50%,
                rgba(0,0,0,0.001) 100%
                );

I use it to add some fade effect on both side of my hr

Gradient from transparent to color in CSS

4 Answers4