CODEWITHSUNDEEP
htmlcss
khanh
khanh

Reputation: 4606

Gradient from transparent to color in CSS

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?

Upvotes: 6

Views: 30277

Answers (4)

Peter
Peter

Reputation: 3018

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.

Upvotes: 17

adedoy
adedoy

Reputation: 2273

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

Upvotes: 0

rgba255
rgba255

Reputation: 41

try it:

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

Upvotes: 3

Hannes
Hannes

Reputation: 8237

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

Upvotes: 1

Related Questions