Gradients are key design feature across the Sky estate; from channel brands to page backgrounds.

All of our brand gradients are held inside the gradient variable map within the toolkit, ensuring that all projects are consistent and always up to date with the latest brand guidelines.

  • Default

    @include background-gradient("default");
  • Highlight

    @include background-gradient("highlight");
  • Sky 1

    @include background-gradient("sky-1");
  • Sky Atlantic

    @include background-gradient("sky-atlantic");
  • Sky Arts

    @include background-gradient("sky-arts");
  • Sky Box Sets

    @include background-gradient("sky-box-sets");
  • Sky Cinema

    @include background-gradient("sky-cinema");
  • Sky Kids

    @include background-gradient("sky-kids");
  • Sky Living

    @include background-gradient("sky-living");
  • Sky News

    @include background-gradient("sky-news");
  • Sky Sports

    @include background-gradient("sky-sports");
  • Sky Store

    @include background-gradient("sky-store");
  • Tile

    @include background-gradient("tile");