Gradient Tests - Esbuild

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