Originally drafted 25 October 2012
Introduced by Adobe.
h1 { filter: blur(10px); }
(But they are different)
Filters create a new 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?
Short-hand CSS reference for various image processing functions
Rotates the color by a certain degree on the color wheel.
Blurred offset version of input’s non-transparent areas
h1 { filter: drop-shadow(0 0 3px #000); }
Box Shadows drawn to parts of the element to optimize the rendering of blurs.
drop-shadow()
operates on the entire element.
Blur radius calculation different from CSS/Canvas Blurs (David Baron on Blur Radius)
box-shadow
, text-shadow
with blur radius
context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = '#000';
Use standard deviation set to 1/2 the value passed as blur radius.
floor(s * 3*sqrt(2*pi)/4 + 0.5)
Stable Chrome (all flavours), Safari (all flavours), Opera 15+
All built-in filters have SVG Filter equivalents
filter: blur([radius]);
<filter id="blur"> <feGaussianBlur stdDeviation="[radius radius]"> </filter>
Works in Firefox!
Built-in filters described in terms of these Filter primitives
feOffset
feColorMatrix
feFlood
feComposite
feMerge
feComponentTransfer
feGaussianBlur
feCustom
feTile
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feDropShadow
feImage
feMorphology
feSpecularLighting
feTurbulence
feBlend
Input as CSS filter (Demo).
More effects like morphing, diffuse lighting, specular lighting, etc.
IE 10+ (unprefixed), Firefox (unprefixed), Chrome, Safari, Opera 15+
Element on which the blend mode is specified.
h1 { mix-blend-mode: multiply; }
Content that is behind the element.
All the elements behind the source elements are rendered into place first.
Backdrop only extends to current stacking context.
Each element using mix-blend-mode
creates a new stacking context.
isolation
h1 { isolation: isolate; }
h1 { isolation: isolate; background: url(cir.png); } h1 span { mix-blend-mode: multiply; }
h1 { background-blend-mode: multiply; background: url('circles.png'), #ffc; }
globalCompositeOperation = '<blend-mode>';
feBlend
Filter primitive will use Blend Modes in the future.Use a spacebar or arrow keys to navigate