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.

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.