[mateo-m]

Contains #2.

What this adds

filter, backdrop-filter, mask-image, mix-blend-mode, background-blend-mode and overscroll-behavior.

An element with any of the first four paints itself and its children into a texture of its own, and the GPU paints that texture over the frame with the effect. blur() is a two-pass Gaussian on a shrunk texture, so a wide blur costs the same as a narrow one. The other filter functions fold into one colour matrix. mask-image takes a gradient and keeps each pixel by its alpha. Over a backdrop-filter: blur() the alpha scales the blur radius instead, so an eased mask gives a progressive blur. All sixteen blend modes of Compositing and Blending 1 plus plus-lighter paint. background-image now paints over background-color instead of replacing it. A rounded scroll box now clips at its corner arcs, and the scroll range ends at the far edge of the content.

The zed bump brings the effect layer render passes in gpui (Metal, wgpu, DirectX) and the per-fragment gradient easing, which replaces the hint approximation of #2.

What I ran and saw

• cargo test at this branch: 295 passed, 0 failed.
• The react suite at this branch: 422 passed, 0 failed.
• The blur output matches headless Chrome within 2 percent at every sampled scanline.
• The demo gradients page gained a sticky header over scrolling rows with a progressive blur. It lives on this branch because it needs backdropFilter, maskImage and overscrollBehavior.

What I did not verify

• The DirectX backend. It is a blind port and never compiled on this machine.
• WebGL paints the content of an effect layer with no effect (by design, no storage buffers), and I did not run the web build.

[Copilot]

🟡 Changes recommended

The React StyleDesc type is missing overscrollBehavior{,X,Y}, which will cause TypeScript excess-property errors for the newly added overscroll test and for consumers using the new feature.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds native effect-layer support so React style values like filter, backdropFilter, maskImage, and blend modes map onto GPUI effect passes, plus overscroll-behavior handling and correct background image-over-color painting.

Changes:

• Extend the style surface (TS + Rust) with filters, backdrop filters, masks, blend modes, and overscroll behavior.
• Introduce a CSS effects parser (filter → blur + color-matrix; <blend-mode> parsing) and wire it into native style resolution.
• Add renderer tests + a demo panel showcasing filters/masks/blends and backdrop blur.

File summaries

File	Description
packages/react/src/types/host.ts	Documents and types new style properties for the React side.
packages/react/src/tests/styles.test.tsx	Adds pixel-based rendering assertions for blur/filter/mask/blend/background layering/backdrop blur.
packages/react/src/tests/events.test.tsx	Adds overscroll behavior test to validate wheel-event containment/propagation.
packages/native/src/style/vars.rs	Adds variable-resolving helpers for parsing filters and blend modes.
packages/native/src/style/resolve.rs	Implements background color+image layering, effect-layer style mapping, and overscroll parsing/application.
packages/native/src/style.rs	Extends native StyleDesc with the new effect + overscroll fields.
packages/native/css/src/lib.rs	Exposes the new effects module.
packages/native/css/src/effects.rs	Implements filter parsing into blur + color matrix, and <blend-mode> parsing.
examples/demo/effects.tsx	Adds a demo page showcasing filters, masks, blend modes, and backdrop filters.
examples/demo/app.tsx	Registers the new demo section.
examples/demo.test.tsx	Ensures the new demo panel renders in the demo test suite.
.changeset/layer-effects.md	Changeset for the new effect-layer and overscroll features.
.changeset/clip-rounded-scroll-boxes.md	Changeset for rounded scroll clipping + scroll range correction.

Review details

• Files reviewed: 14/14 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[mateo-m]

Moved to remorses#52.