Search code examples
cssgradientcompass

Reversing gradients with Compass

I'm trying to create a background where the same gradient is repeated from top to bottom, and then from bottom to top, just like this:

reverse gradient

I'm using a gradient generator and thought about Compass @include background for including both gradients but I can't make it work and I'm only seeing the first gradient (top to bottom).

My code so far is: 

@include background(
  linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center top,
  linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center bottom);

How can I do to include both gradients, one aligned to the top and the other to the bottom?

Solution

  • I don't know Compass, so I can help you with the Compass syntax, but the CSS should be

    div {
  width: 300px;
  height: 300px;
  border: solid 1px black;
  }
.test {
  background: linear-gradient(180deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%)   top center / 100% 50% no-repeat,
  linear-gradient(0deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%)  center bottom / 100% 50% no-repeat;
  }
    <div class="test"></div>

    You need to add a size of 100% 50%. If you don't do that , every image ocuppies all the space and you only see the top one