Search code examples
csssasscompass-sass

Multiple background gradients using Compass

How do you write multiple background gradients using Compass? The docs only show examples of writing a single gradient at a time and I can't find anything about it by googling except a google group discussion that went quiet over two years ago! There must be a way of doing it cos layering up gradients is quite common practice I thought!

Solution

  • You should write them like so:

    div{
  @include background( linear-gradient(top left, #333, rgba(1,1,1, .3)),
                       radial-gradient(#c00, #fff 100px));
}

    source: http://compass-style.org/reference/compass/css3/images/

    (ugly but working) example: http://codepen.io/nobitagit/pen/cFjkv