Results 1 to 4 of 4

Thread: CSS3 linear gradient syntax help

  1. #1
    Join Date
    Dec 2004

    CSS3 linear gradient syntax help


    I'm trying to create a gradient background using CSS3 techniques.
    I'd like to make a linear gradient from top to bottom, and go from transparent to #eee. However, I'm having trouble with the syntax.

    This is what I have so far:

    background: transparent; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffeeeeee'); /* for IE */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(238, 238, 238, 1.0))); /* for webkit browsers */
    background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(238, 238, 238, 1.0) 100%); /* for firefox 3.6+ */
    I get various errors like missing semi-colons and parse errors.
    Can anyone help?

  2. #2
    Join Date
    Dec 2005
    Check out these sites, they'll give you the syntax until you feel comfortable enough typing it in that you can just do it from memory:


    EDIT: What do you mean parse errors? Are you talking about CSS? For the record, glancing at the CSS syntax seems fine to me.

  3. #3
    Join Date
    Dec 2004
    Hi and thanks.

    I have actuelly been to both sites, but I they don't seem to calculate alpha transparency, the RGBa thing.

  4. #4
    Join Date
    Dec 2005
    Code, a link, and in this case even a screenshot, will help your cause.

    Are you sure you interpreting what the alpha transparency is doing correctly? Your gradients are supposed to go from transparent (or whatever the color(s) behind your element are) to an off white.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles