This page is a visual test of esbuild's CSS gradient transformation. Run it like this:

    ./esbuild --servedir=scripts --outfile=scripts/out.css scripts/gradient-tests.css --target=firefox30

Then open this page as http://localhost:8000/gradient-tests.html.

## 1. Red to green in P3

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

native
esbuild
native
esbuild
native
esbuild

## 2. Rainbow using shorter hue

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

native
esbuild
native
esbuild
native
esbuild

## 3. Rainbow using longer hue

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

native
esbuild
native
esbuild
native
esbuild

## 4. Rainbow using increasing hue

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

native
esbuild
native
esbuild
native
esbuild

## 5. Rainbow using decreasing hue

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

native
esbuild
native
esbuild
native
esbuild

## 6. Transition hint / midpoint

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

native
esbuild
native
esbuild
native
esbuild

## 7. Premultiplied alpha

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

native
esbuild
native
esbuild
native
esbuild

## 8. Mixed units

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

native
esbuild
native
esbuild
native
esbuild