April 30, 2026

Pixels, panic, and pure wizardry

Compositing and Blending – Exploring the math and intuition behind blend modes

The internet is losing it over the secret math that makes websites look normal

TLDR: The article explains the hidden layer-by-layer process that makes websites look right, showing that your browser constantly mixes visuals behind the scenes. Readers were split between amazement and mild horror, joking that everyday web design runs on math, movie-history trivia, and pure chaos.

A deceptively nerdy post about how browsers stack and mix visuals somehow turned into a full-on comment-section therapy session for people realizing their screen is basically doing tiny magic tricks nonstop. The article walks readers through a simple idea with surprisingly huge consequences: every page you see is built from layers, and your browser has to decide, pixel by pixel, what shows up on top, what gets hidden, and how colors combine. In plain English, it’s the invisible process that makes buttons, boxes, shadows, fades, and flashy effects look right instead of like a broken collage.

And the community reaction? Half awe, half existential crisis. One camp was absolutely floored, posting variations of “my browser is doing what now?” and calling it a miracle that modern web pages function at all. The other camp instantly turned into the internet’s toughest teachers, arguing over whether this kind of math is elegant genius or proof that front-end development is cursed forever. Some readers loved the article’s intuitive, visual approach and said it finally made a confusing topic click. Others joked that it was the kind of explanation that starts friendly and ends with you staring into the void while Lucasfilm somehow enters the chat.

The funniest reactions compared the browser to an overworked stage crew moving scenery in the dark millions of times per second. The hottest take? That the web only looks effortless because an absurd amount of hidden complexity is working overtime behind every single textbox.

Key Points

  • The article explains compositing as the browser process of combining a source layer with a backdrop layer to produce the final rendered image.
  • It distinguishes painted layers from later visual operations such as transforms and fading, noting that some changes can be handled through recompositing instead of repainting for better performance.
  • It describes compositing as more flexible than simple overpainting, allowing different rules for how source and backdrop pixels are combined.
  • The article states that two overlapping images produce four pixel-region cases, and different compositing behaviors can be selected for those regions.
  • It introduces the 12 Porter-Duff compositing operators from 1984 and shows that operator-dependent factors determine the output color and opacity for each composited pixel.

Hottest takes

"Your browser is basically performing sorcery so your button can have a shadow" — pixelpete
"This starts as ‘neat!’ and ends as ‘I can never unsee the chaos’" — divadown
"The fact Lucasfilm helped explain why CSS looks weird is the funniest plot twist here" — blendmodebro
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.