Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Multiple background gradients using Compass

Multiple background gradients using Compass

Problem

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!

Problem courtesy of: musoNic80

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

Solution courtesy of: Nobita

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Multiple background gradients using Compass

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×