Practical Blend Modes

on YouTube ↗29m

" summary

Shows concrete recipes: generating polka dots with a Sass random function, faking infrared and 3D looks with layered blend modes, and using mix-blend-mode and backdrop-filter (or the fixed background hack where backdrop-filter lacks support). Builds live demos and open projects (CSS Graham, Tiffany) that work in modern browsers, compares file sizes—example 3.6 MB video versus a 24.7 MB GIF—and notes real tradeoffs: browser support gaps and repaint cost but fewer image requests and fast in-browser prototyping.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 9:05BLEND MODE: MULTIPLY
3. 10:16BLEND MODE MULTIPLY
4. 12:06BLEND MODE SCREEN
5. 14:20BLEND MODE: SCREEN
6. 17:28BLEND MODE COLOR
7. 18:38BLEND MODE: COLOR
8. 22:50BLEND MODE OVERLAY (TEXT)
9. 23:25BLEND MODE: OVERLAY (BORDER)
10. 24:31BLEND MODE: DIFFERENCE
11. 26:35DO TRY THIS BECAUSE: 1. Performance

" related talks

• 50mPractical Blend ModesUna Kravets · CSS Day + HTML Special 2016
• 30mCSS Blend Modes, Because...Una Kravets · JSConf.Asia 2018
• 32mA Deep Dive into CSS Blend ModesShwetank Dixit · Meta Refresh 2015
• 43mSmartWeb 2016 - Una KravetsUna Kravets · SmartWeb 2016
• 40mFilter Effects & Blend ModesDivya Manian · CSS Day 2013
• 31mThe Power of CSSUna Kravets · Front-Trends 2017
• 28mBreaking BlankCarmine Alfano · CSS Day 2019
• 01h 09mEven More CSS SecretsLea verou · FrontMania 2018