Filter Effects & Blend Modes

@divya • Product Manager, Adobe

Filter Effects

Creation of FX Task Force (around 2010)

Originally drafted 25 October 2012

Based on SVG Filters

Introduced by Adobe.

Available since Chrome 18, Safari 6.

What is it?

Filter stack

A filter changes the pixels of an element.

What are filters?

h1 {
  filter: blur(10px);
}

Demo

Wait, we have seen this before!

Box Shadows, Text Shadows

(But they are different)

How do filters work?

Filters create a new stacking context

Stacking Context

Determines the paint order of elements (example) - Detailed explanation

Stacking Context is important in choosing an element to be rendered by the GPU.

Filters will be computed & applied by GPU on animated elements (Safari & Chrome). Demo

What filters do we have?

Built-in Filters

Short-hand CSS reference for various image processing functions

Hue Rotate

Rotates the color by a certain degree on the color wheel.

Demo

Drop Shadow

Blurred offset version of input’s non-transparent areas

h1 { 
  filter: drop-shadow(0 0 3px #000); 
}

Box Shadow

Drop Shadow

Box Shadows drawn to parts of the element to optimize the rendering of blurs.

drop-shadow() operates on the entire element.

Blurs in CSS Filters

Blur radius calculation different from CSS/Canvas Blurs (David Baron on Blur Radius)

CSS Blurs

box-shadow, text-shadow with blur radius

Canvas Blurs

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = '#000';

Standard Deviation in CSS/Canvas Blurs

Use standard deviation set to 1/2 the value passed as blur radius.

Standard Deviation in Filters

floor(s * 3*sqrt(2*pi)/4 + 0.5)

Built-in Filters Browser Support

Stable Chrome (all flavours), Safari (all flavours), Opera 15+

SVG Filters

All built-in filters have SVG Filter equivalents

E.g. Blur Filter

filter: blur([radius]);

<filter id="blur">
 <feGaussianBlur 
 stdDeviation="[radius radius]">
</filter>

Works in Firefox!

Filter Primitives

Built-in filters described in terms of these Filter primitives

Advantages

Input as CSS filter (Demo).

More effects like morphing, diffuse lighting, specular lighting, etc.

Demo

SVG Filters Browser Support

IE 10+ (unprefixed), Firefox (unprefixed), Chrome, Safari, Opera 15+

Blend Modes

Set how colors mix when source element and backdrop overlap.

Blend Mode Values

Source Element

Element on which the blend mode is specified.

h1 { mix-blend-mode: multiply; }

Backdrop

Content that is behind the element.

All the elements behind the source elements are rendered into place first.

Stacking Context!

Backdrop only extends to current stacking context.

What creates stacking context?

Each element using mix-blend-mode creates a new stacking context.

What if you want to create a stacking context?

isolation

h1 { isolation: isolate; }
h1 { 
  isolation: isolate; 
  background: url(cir.png); }

h1 span { 
  mix-blend-mode: multiply; }

Background Blend Modes

h1 {
  background-blend-mode: multiply;
  background: url('circles.png'), #ffc;
}

Demo

Blend Modes in Canvas

globalCompositeOperation = '<blend-mode>';

Demo

Blend Modes vs Filters

Thanks

Dirk Schulze& Rik Cabanier

Follow

@adobeweb & codepen.io/adobe/

Use a spacebar or arrow keys to navigate