Home/ Questions/Q 3997604
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:25:20+00:00

@include linear-gradient(color-stops(#e2e2e2, #fff 600px), top); will generate something like background-image: -webkit-gradient(linear, 0% 0%, 0%

  • 0
@include linear-gradient(color-stops(#e2e2e2, #fff 600px), top);

will generate something like

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e2e2e2), color-stop(100%, #ffffff));
                                                     ^ this is not 600px

Also I learnt from this post that in webkit I should be using something like 600 instead of 600px.

Does Compass not do that?

Also I need to add background-repeat: no-repeat else the gradient will repeat in webkit?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    +1 having the same issue. Frustratingly, this compass example page shows gradients working fine in WebKit. Maybe it’s a version issue? I’m about to try downgrading to an earlier version and see if that helps.

    EDIT

    Looks like the webkit color stops have been fixed in head. Install the latest version (0.11.beta.2 as of this writing) and make sure you restart your server (unlike we did the first time) and you’ll find that webkit color stops work properly.

    • 0