Hi there

Welcome to this slide deck, built for a presentation at SydCSS in July 2015.

Before you go browsing these slides, here are some things you should know:

You may proceed when ready.

☞

Who’s this bozo?

Gradient Circus

Types of gradients

Support

No prefixes needed!

Act I

Tips and tricks

Patterns

Gradients only — lea.verou.me/css3patterns

Gradients + blend modes — bennettfeely.com/gradients

Pictures

A single div — a.singlediv.com

Debugging

Gradient Inspector — Chrome Extension

Placeholders

Gradify — gradifycss.com

Background animation

Bit of a grey area

Cross-fade pictures Transition gradients
Chrome ✔ -
Safari ✔ -
IE / Edge - ✔
Firefox - -

The future

CSS Images Level 4 — Nowhere near finished

Among other things, it has…

Conic gradients

Not this

This

The future – today

Obligatory slide about Lea Verou

Act II

Linear gradient angles

Do you really understand?

Patrick Brosset on Medium

Act III

Background image layering

Images from the top, then colour

Remember, gradients are just images

background-color:
  skyblue;
background-image:
  url(...),
  linear-gradient(...),
  radial-gradient(...);

Use number keys 1 to 4 to change the image

Images from the top, then colour

background-repeat:
  no-repeat;
background-size:
  60% 100%;
background-position:
  100% 0,
  0 0;
background-image:
  radial-gradient(...),
  radial-gradient(...);

Use number keys 1 to 4 to change the image

Act IV

Colour calculations

A basic example

linear-gradient(
  to right,
  hsl(220, 90%, 50%),
  hsl(0, 90%, 60%)
);
linear-gradient(
  to right,
  rgba(13, 89, 242, 1),
  rgba(245, 61, 61, 1)
);
linear-gradient(
  to right,
  rgba( 13, 89, 242, 1),
/*      ↓   ↓    ↓   ↓ */
  rgba(245, 61,  61, 1)
);
linear-gradient(
  to right,
  rgba( 13, 89, 242, 1),
/*      ↓   ↓    ↓   ↓ 
  rgba(129, 75, 152, 1)
        ↓   ↓    ↓   ↓ */
  rgba(245, 61,  61, 1)
);
  1. A simple gradient
  2. Convert to RGBA
  3. Interpolate each channel separately
  4. Example at 50%

Transparency

transparent == rgba(0, 0, 0, 0) 

linear-gradient(red, rgba(255,0,0,0) 50%,
                     rgba(0,0,255,0) 50%, blue);
linear-gradient(red, transparent, blue);

Old spec

“Normal”
colour

  • Safari
  • Canvas
  • SVG
Image of a color gradient
Image of a color gradient

New spec

Pre-multiplied alpha

  • Chrome
  • Firefox
  • IE / Edge

Pre-whatified what now?

Pre-multiplied alpha – keeping transparent pretty

The formula for simple alpha compositing is

co = Cs x αs + Cb x αb x (1 - αs)

Where

  • co: the premultiplied pixel value after compositing
  • Cs: the color value of the source graphic element being composited
  • αs: the alpha value of the source graphic element being composited
  • Cb: the color value of the backdrop
  • αb: the alpha value of the backdrop
W3C: CSS Compositing and Blending Level 1

Simple, right?

Let’s try again — Blending 101

Blending partly-transparent red on a white background.1. Multiply source by the alpha value.2. Multiply background by the inverse source alpha value.3. Add them together

source
 × 0.6		 + destination
 × 0.4		 = output
 
R
G
B
A

Now back to gradients

Often, it can be more efficient to store a pre-multiplied value for the color and opacity. The pre-multiplied value is given by

cs = Cs x αs W3C: CSS Compositing and Blending Level 1
rgba(255, 0,
0, 0.5)
Image of a color gradient
rgba(0, 0,
0, 0)

Normal
R
A

Pre-multiplied
R
A

Click the graphs for extra details

Funky side effects

Thus the formula for simple alpha compositing using pre-multiplied values becomes

co = cs + cb x (1 - αs)

To extract the color component of a pre-multiplied value, the formula is reversed:

Co = co / αo W3C: CSS Compositing and Blending Level 1
rgba(255, 0,
0, 1)
Image of a color gradient
rgba(0, 0,
255, 0.2)

Normal
R
A

Pre-multiplied
R
A

Click the graphs for extra details

Grand Finale