Return to Sky UI homepage

Gradients

View on FigmaView on GitHub
import { gradient } from '@sky-uk/ui-core';

Basic Usage Example

You can use the gradient function to get color stops from the theme by name.

gradient('primary');


// returns
['#000FF5', '#000FBE'];

Available Gradients

Brand

  1. #ff8c00
  2. #f80032
  3. #ff00a0
  4. #8c28ff
  5. #0023ff
  6. #19a0ff

Sky

Gradient key sky

  1. #ff7800
  2. #f80032
  3. #ff00a0
  4. #8c28ff
  5. #0023ff
  6. #1798ff

Sky - accessible

Gradient key sky.accessible

  1. #000ff5
  2. #000fbe

Primary

Gradient key primary

  1. #1aab31
  2. #17992c

Environmental

Gradient key environmental

Products

  1. #6e00ff
  2. #ff00a5

Broadband

Gradient key products.broadband

  1. #000ff5
  2. #00e6ff

Business (previously Connect)

Gradient key products.business

  1. #000ff5
  2. #47c5ff

Business - accessible (previously Connect)

Gradient key products.business.accessible

  1. #091153
  2. #0c1b87

Glass

Gradient key products.glass

  1. #ff00a5
  2. #ff0a50
  3. #ff6400

Mobile

Gradient key products.mobile

  1. #ff00a5
  2. #ff0a50
  3. #f56400

Mobile - accessible

Gradient key products.mobile.accessible

  1. #ff2800
  2. #ff371e
  3. #ff9600

Protect

Gradient key products.protect

  1. #ff2800
  2. #f56400

Protect - accessible

Gradient key products.protect.accessible

  1. #000ff5
  2. #00d2ff

TV

Gradient key products.tv

  1. #000ff5
  2. #0096ff

TV - accessible

Gradient key products.tv.accessible

  1. #001211
  2. #00818a

NOW TV

Gradient key products.nowtv

Channels

  1. #000000
  2. #000000

Arts

Gradient key channels.arts

  1. #003264
  2. #27749d

Atlantic

Gradient key channels.atlantic

  1. #5c0f39
  2. #80082c

Box

Gradient key channels.box

  1. #ff5200
  2. #ff5200

Challenge

Gradient key channels.challenge

  1. #ff0031
  2. #9b0031

Cinema

Gradient key channels.cinema

  1. #ff8200
  2. #ff8200

Comedy

Gradient key channels.comedy

  1. #182935
  2. #31576b

Crime

Gradient key channels.crime

  1. #e90000
  2. #e90000

Documentaries

Gradient key channels.documentaries

  1. #6626a1
  2. #4c0080

Kids

Gradient key channels.kids

  1. #8c00ff
  2. #ff5e1d

Max

Gradient key channels.max

  1. #2b6300
  2. #3e8f00

Nature

Gradient key channels.nature

  1. #041957
  2. #122d74

News

Gradient key channels.news

  1. #0080df
  2. #079ef8

One (replaced by Sky Max)

Gradient key channels.one

  1. #361740
  2. #763175

Pick

Gradient key channels.pick

  1. #021158
  2. #122476

Sports

Gradient key channels.sports

  1. #003268
  2. #073fa0

Store

Gradient key channels.store

  1. #0d0d0d
  2. #262626

Witness

Gradient key channels.witness

Areas

  1. #0644a1
  2. #862e81

Service

Gradient key service

Loyalty

  1. #708186
  2. #a1acb2

One

Gradient key loyalty.one

  1. #c88b2e
  2. #e6bb63

Two

Gradient key loyalty.two

  1. #6e6c89
  2. #8d8dbe

Three

Gradient key loyalty.three

  1. #191919
  2. #474747

Four

Gradient key loyalty.four

Regional Variations

DE

  1. #065730
  2. #0ba158

Bundesliga DE

Gradient key regional.de.bundesliga

  1. #065730
  2. #08713e

Bundesliga DE - accessible

Gradient key regional.de.bundesliga.accessible

  1. #0014ff
  2. #00d7ff

Business DE

Gradient key regional.de.business

  1. #990033
  2. #cb0033

Cinema DE

Gradient key regional.de.cinema

  1. #990033
  2. #cc0027

Cinema DE - accessible

Gradient key regional.de.cinema.accessible

  1. #4c0080
  2. #6626a1

Entertainment DE

Gradient key regional.de.entertainment

  1. #ff6218
  2. #ffa300

Kids DE

Gradient key regional.de.kids

  1. #c1481b
  2. #996200

Kids DE - accessible

Gradient key regional.de.kids.accessible

  1. #000000
  2. #555555

Non Sky DE

Gradient key regional.de.nonSky

  1. #000ff5
  2. #0096ff

Ultimate TV DE

Gradient key regional.de.ultimateTv

Return Types

The gradient function also supports a second argument, which sets the return type.

If you pass 'text' as a string to the second argument then it will return a css block that is suitable for applying gradients to text:

styled.div`
  ${gradient('primary', 'text')}
`;


// returns
.c0{
    @supports (-webkit-background-clip: text) or (background-clip: text) {
      background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
}

If you pass 'background' as a string to the second argument then it will return a line of css, setting the background-image of the component to a gradient:

styled.div`
  ${gradient('primary', 'background')}
`;


// returns
.c0{
  background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
}