Bug

When using the transparent keyword in a CSS linear-gradient, the web renderer passes it directly to the Canvas API's addColorStop() as "transparent", which resolves to rgba(0, 0, 0, 0).

The Canvas API interpolates in premultiplied alpha space, so a gradient like:

linear-gradient(to top, white, transparent)

interpolates between rgba(255,255,255,1) and rgba(0,0,0,0), producing a grayish/dark band in the middle of the gradient.

Expected behavior

Chrome's CSS engine (and CSS Color Level 4) interpolates transparent as the same hue but with zero alpha. So linear-gradient(to top, white, transparent) interpolates between rgba(255,255,255,1) and rgba(255,255,255,0) — a clean fade with no dark band.

Root cause

In packages/web-renderer/src/drawing/parse-linear-gradient.ts, colors are passed through as-is (line 109):

const normalizedColor = colorStr;

When colorStr is "transparent", it gets passed directly to gradient.addColorStop(), which interprets it as rgba(0,0,0,0).

Fix

When the transparent keyword appears in a gradient, the renderer should replace it with the same RGB as the nearest non-transparent color stop but with alpha 0. For example:

• linear-gradient(to top, white, transparent) → the transparent stop should become rgba(255, 255, 255, 0)
• linear-gradient(to top, red, transparent) → the transparent stop should become rgba(255, 0, 0, 0)

Test case

A test fixture has been added in gradient-transparent-keyword.test.tsx to validate this once fixed.