Gradient Transformation Tests

This page is a visual test of esbuild's transformation of modern CSS gradient syntax for older browsers. Each test case compares the browser's native rendering of the modern syntax to esbuild's transformation (which uses the legacy syntax instead). This makes it easy to visually verify that esbuild's transformation is correct as well as to visually inspect a given browser's rendering of these gradient syntax features.

At the time of writing, the latest versions of Chrome and Safari (Chrome 120 and Safari 17.1) can natively render all of these test cases correctly, so you should expect these results to match in Chrome and Safari. However, the latest version of Firefox (Firefox 120) contains multiple gradient rendering bugs, so esbuild's transformation is currently necessary to get these test cases to render correctly in Firefox.

1. Red to green in P3

gradient(
  color(display-p3 1 0 0),
  color(display-p3 0 0.6 0))

Note: Interpolation should happen in the oklab color space.

2. Rainbow using shorter hue

gradient(
  in hwb shorter hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

3. Rainbow using longer hue

gradient(
  in hsl longer hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

4. Rainbow using increasing hue

gradient(
  in lch increasing hue,
  hsl(240deg 100% 75%) 10%,
  hsl(180deg 100% 75%) 90%)

5. Rainbow using decreasing hue

gradient(
  in oklch decreasing hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

6. Transition hint / midpoint

gradient(#f00, #ff0, 75%, #0ff, #00f)

Note: The gradient should be "pulled" to one side.

7. Premultiplied alpha

gradient(#f00f, 10%, #00f1, 90%, #0f0f)

Note: The transparent area should not have much blue color.

8. Mixed units

gradient(
  color(display-p3 0.4 0 1) 30px,
  color(display-p3 1 0.75 0.4) 60%)

Note: Mixed units can be supported by emitting calc() expressions.