A Deep Dive into CSS Blend Modes
summary
CSS now exposes roughly sixteen blend modes (fifteen non‑normal effects) and shows how they work at the algorithm level and inside stacking contexts, with concrete APIs: mix-blend-mode, background-blend-mode and isolation: isolate for DOM, canvas’ context.globalCompositeOperation and SVG feBlend. Demos combine gradients, masks, GIFs and real‑time webcam via getUserMedia; Safari lacks non‑separable HSL modes, IE lacks support, Opera/Chrome/Firefox implement most, performance hits GPU on mobile and can lag in Firefox, and feature detection via CSS.supports or Modernizr is recommended.
AI-written summary · about
chapters (30)
- 0:00Introduction
- 0:32Day 2 Agenda
- 1:04What were your favorite cartoons
- 4:30Compositing
- 6:30Blending
- 7:31Blend Modes
- 8:04Mix Blend Mode
- 10:36Stacking Context
- 11:48Isolation
- 13:10Background Blend Mode
- 14:05Multiple Blend Modes
- 14:38Blend Mode Categories
- 15:51Darkening
- 16:49Screen
- 17:15Hard Light
- 18:07Difference
- 18:51NonSeparable
- 19:50Blend Modes with Other Technologies
- 20:01Gradient Blend Modes
- 20:44Masks
- 23:18Realtime Video
- 24:19Canvas
- 24:59SVG
- 25:30Browser Support
- 25:54Safari
- 26:10Spartan
- 26:34Degradation
- 27:00Feature Detection
- 27:35Recap
- 28:21Further Reading
