linear-gradient cannot include transparent

[pathawks]

I am trying to fade from white to transparent, but because bourbon sets the background color to white, the whole background is white.

@include linear-gradient(white 0px, transparent 100px);

This produces the following CSS:

background-color:#fff;
background-image:-webkit-linear-gradient(#fff 0px,transparent 100px);
background-image:linear-gradient(#fff 0px,transparent 100px);

The fallback background-color prevents any part of the background from being transparent.

bourbon does check to see if the fallback color is transparent, but it only checks the first color step.

  // Set $G1 as the default fallback color
  $fallback-color: nth($G1, 1);

  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

[Nevraeka]

@pathawks - is this for layered gradients? If its not - try using

@include linear-gradient(rgb(255,255,255) 0px, rgba(255,255,255,0) 100px);

[Nevraeka]

Added a PR for forcing better transparency for layered gradients w/ an optional variable

[donokuda]

@pathawks You can also set the fallback color to transparent using the $fallback variable:

@include linear-gradient(white 0px, transparent 100px, $fallback: transparent);

[lenart]

Ran into same problem. Had a black transparent gradient (opacity 80% to 60%) and wanted a fallback color with, say, 60% transparency (or flat color). This would work if instead of explicitly setting background-color and background-image we'd only set background property but I guess there's a reason guys didn't do that from the beginning.

[13protons]

I agree that this is unexpected behavior, but in the meantime you can avoid the $fallback variable by specifying values backwards and using a directional keyword. This lets "transparent" becomes the fallback by virtue of being the first value given:

// No gradient, just white
@include linear-gradient(white 0px, transparent 100px);

// Gradient w/ transparency on right, white on left
@include linear-gradient(to left, transparent , white);

[tysongach]

Don’s comment above should resolve this original issue of fading from white to transparent:

@include linear-gradient(white 0px, transparent 100px, $fallback: transparent);

Here’s a CodePen: http://codepen.io/tysongach/pen/bdEwvV

It’s also worth noting that unless you need IE9 support, vendor prefixing is no longer needed, and you can go with regular ’ol CSS:

background: linear-gradient(180deg, white, transparent);