diff --git a/docker/frontend/shared/types/index.ts b/docker/frontend/shared/types/index.ts
index f30f117..091fb48 100644
--- a/docker/frontend/shared/types/index.ts
+++ b/docker/frontend/shared/types/index.ts
@@ -120,6 +120,41 @@ export interface MosaicSpot {
   r: number;
 }
 
+// FX tab > LINEAR / RADIAL GRADIENT. One local adjustment: a shape the user
+// dragged on the photo, the three knobs it carries, and the alpha the render
+// reads them at — Lightroom's gradient masks, with the maths of the GLSL spec
+// they were asked for (scratchpad gradient_mask.md) ported to SkSL.
+//
+// Everything positional is a fraction of the render, the same measurement HEAL
+// and MOSAIC store and for the same reason: the preview and the export render
+// the same photo at two sizes, and only a fraction lands a shape on both. The
+// semi-axes are fractions of the WIDTH, so an ellipse is the same ellipse on a
+// portrait photo as on a landscape one, exactly as HEAL's circle is.
+//
+// LINEAR: (x, y) and (ex, ey) are the two ends of the drag, and the alpha runs
+// from 0 at the start to 1 at the end — the drag IS the feather, which is what
+// makes the same gesture a wide fade or a hard edge. RADIAL: (x, y) is the
+// centre, (rx, ry) the semi-axes, `angle` the ellipse's rotation in radians and
+// `feather` the fraction of the axis the alpha fades over, inward from the rim.
+export interface GradientMask {
+  kind: 'linear' | 'radial';
+  x: number;
+  y: number;
+  ex: number;
+  ey: number;
+  rx: number;
+  ry: number;
+  angle: number;
+  feather: number;
+  // The three local knobs. Exposure is in EV, the -5..+5 the spec's blend shader
+  // is written for (its own `pow(2.0, e)`); contrast and saturation are the
+  // spec's -1..+1 as the app's own -10..+10 knobs, so 0 is every one of them and
+  // nothing moves until the user moves it.
+  exposure: number;
+  contrast: number;
+  saturation: number;
+}
+
 export interface ColorAdjustments {
   exposure: number; // -10 to +10 (mapped to matrix multiplier or offset)
   contrast: number; // -10 to +10
@@ -161,6 +196,11 @@ export interface ColorAdjustments {
   // FX tab > MOSAIC. The spots the hiding brush covered, in the order they were
   // laid down. Absent = nothing was hidden, and the pass is not built at all.
   mosaic?: MosaicSpot[];
+  // FX tab > LINEAR / RADIAL GRADIENT. The masks the user drew, in the order
+  // they were laid down: each is applied to what the one before it left, the
+  // way a stack of local adjustments reads in Lightroom. Absent = no local
+  // adjustments at all, and no pass is built.
+  masks?: GradientMask[];
   exposureCompensation: number; // -3 to +3 EV. Camera: AE bias (hardware). Library: 2^EV matrix gain.
 }
 
diff --git a/docker/frontend/shared/utils/gradientMask.ts b/docker/frontend/shared/utils/gradientMask.ts
new file mode 100644
index 0000000..4804cc1
--- /dev/null
+++ b/docker/frontend/shared/utils/gradientMask.ts
@@ -0,0 +1,169 @@
+import type { GradientMask } from '../types';
+
+// FX tab > LINEAR / RADIAL GRADIENT — Lightroom's two gradient masks, the local
+// adjustments that are a SHAPE rather than a whole-frame knob.
+//
+// HEAL and MOSAIC repair and hide; these two grade. A shape is dragged on the
+// photo, and inside it (through the alpha the shape's own maths produces) the
+// three knobs below move the pixels and nothing outside them does. A linear
+// gradient is the shape whose alpha is a straight ramp across the drag; a radial
+// one is an ellipse whose alpha holds full until its feather and dies at its
+// rim. Two shapes, one shader: the kind is a number in the mask's own uniform
+// and the block that reads it branches, because that is the whole difference
+// between them.
+//
+// The maths is the GLSL spec these were asked for (its scratchpad md, sections
+// 1 and 2 for the masks and the blend shader for the colour): the linear one
+// projects the pixel onto the drag with a dot product and smoothsteps the
+// result; the radial one moves the pixel into the ellipse's own frame, rotates
+// it back by -angle, divides by the semi-axes and smoothsteps inward from the
+// rim. Written in SkSL because that is what this renderer is (Canvaskit, see
+// skiaShim.ts), stage for stage: the one pass the spec asks for per mask, in
+// the order the user drew them, each reading what the one before it left.
+//
+// ponytail: the spec's next rung — Highlights/Shadows isolated with pow(luma, 3)
+// weight masks — is not here. Its own section calls it an upgrade, and the three
+// knobs are what "gradient mask" means until a photo shows a sky that needs
+// rescuing apart from the grass under it. The same rung holds Lightroom's
+// per-mask invert and colour/tone ranges.
+export const MASK_KIND = { linear: 0, radial: 1 } as const;
+// Exposure is stored as the EV itself — the spec's own -5..+5 — because that is
+// what `pow(2.0, e)` reads, and a stop is a stop whatever the app's slider units
+// are elsewhere. The other two are -10..+10 like every other knob, and are turned
+// into the spec's -1..+1 on the way to the shader.
+export const MASK_EXPOSURE_MAX = 5;
+// How much of the semi-axis a fresh ellipse fades over. Half: the edge is soft
+// enough to be a gradient mask rather than a cut-out, and every pixel of the
+// ellipse is still on the shape's own side of the rim.
+export const MASK_DEFAULT_FEATHER = 0.5;
+// The smallest drag that is a shape rather than a press: a hundredth of the
+// width. Below this the mask is dropped instead of laid down — the same floor
+// readMasks refuses a stored one at.
+export const MASK_MIN = 0.01;
+
+const num = (v: unknown, fallback: number) => {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : fallback;
+};
+const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
+const clampA = (v: number) => (v < -10 ? -10 : v > 10 ? 10 : v);
+const clampEV = (v: number) => (v < -MASK_EXPOSURE_MAX ? -MASK_EXPOSURE_MAX : v > MASK_EXPOSURE_MAX ? MASK_EXPOSURE_MAX : v);
+
+// The stored masks, made readable: numbers, inside the frame, one kind — the
+// same guard HEAL's and MOSAIC's lists get, so a hand-written or older file
+// cannot produce a shape the overlay and the renderer disagree about. A mask
+// with no shape (a linear drag of no length, an ellipse of no radius) is
+// dropped: it would paint nothing and could never be taken hold of on the photo.
+export function readMasks(masks: GradientMask[] | undefined): GradientMask[] {
+  if (!Array.isArray(masks)) return [];
+  return masks
+    .filter((m) => m?.kind === 'linear' || m?.kind === 'radial')
+    .map((m) => ({
+      kind: m.kind,
+      x: clamp01(num(m.x, 0.5)),
+      y: clamp01(num(m.y, 0.5)),
+      ex: clamp01(num(m.ex, 0.5)),
+      ey: clamp01(num(m.ey, 0.5)),
+      rx: Math.max(0, num(m.rx, 0)),
+      ry: Math.max(0, num(m.ry, 0)),
+      angle: num(m.angle, 0),
+      feather: clamp01(num(m.feather, MASK_DEFAULT_FEATHER)),
+      exposure: clampEV(num(m.exposure, 0)),
+      contrast: clampA(num(m.contrast, 0)),
+      saturation: clampA(num(m.saturation, 0)),
+    }))
+    .filter((m) => (m.kind === 'linear' ? Math.hypot(m.ex - m.x, m.ey - m.y) > MASK_MIN : m.rx > 0 && m.ry > 0));
+}
+
+// The uniform block the shader for `n` masks reads: the shapes, the ellipse
+// parameters, the knobs with the kind, then the frame the fractions are of.
+// Declaration order, arrays expanded — one buffer is one upload per render, the
+// same shape healUniforms and mosaicUniforms use. Its length is a function of
+// the list, not a fixed capacity, because the shader carries exactly the masks
+// the recipe holds.
+export function maskUniforms(masks: GradientMask[], width: number, height: number): Float32Array {
+  const list = readMasks(masks);
+  const n = list.length;
+  const u = new Float32Array((3 * n + 1) * 4);
+  for (let i = 0; i < n; i++) {
+    const m = list[i];
+    u.set([m.x, m.y, m.ex, m.ey], i * 4);
+    u.set([m.rx, m.ry, m.angle, m.feather], (n + i) * 4);
+    // The knobs are handed over in the renderer's own units: EV for exposure,
+    // -1..1 for the other two, which is what the spec's blend shader reads.
+    u.set(
+      [m.exposure, m.contrast / 10, m.saturation / 10, MASK_KIND[m.kind]],
+      (2 * n + i) * 4
+    );
+  }
+  u.set([width, height, 0, 0], 3 * n * 4);
+  return u;
+}
+
+// The colour inside a mask, in the spec's own order and its own formulas:
+// exposure first (a power of two, so a stop is a stop), then contrast about the
+// middle, then saturation as a mix away from the pixel's own REC-709 luma. The
+// result is clamped to the range a file can hold — the spec's own guard, and it
+// is `mix`ed back over the base by the mask's alpha, so a mask at half strength
+// is half of the move rather than the whole of it.
+const adjustFn = `
+half3 maskAdjust(half3 c, float3 a) {
+  c = c * half(pow(2.0, a.x));
+  c = (c - half(0.5)) * half(1.0 + a.y) + half(0.5);
+  half l = dot(c, half3(0.2126, 0.7152, 0.0722));
+  c = mix(half3(l), c, half(1.0 + a.z));
+  return clamp(c, half3(0.0), half3(1.0));
+}
+`;
+
+// One unrolled block per mask, for the reason heal.ts unrolls its own: SkSL
+// indexes a uniform array by constant only, so the shader is built for the count
+// it is handed rather than for a capacity, and the renderer caches them by count
+// (exportEngine's maskEffectFor). A linear mask's alpha is the spec's dot
+// product, and its zero-length guard is the filter in readMasks rather than a
+// branch here: a mask with no length is not a mask. A radial mask's alpha is
+// 1 inside the feather and 0 at the rim.
+const maskBlock = (i: number) => `
+  {
+    float a = 0.0;
+    if (adj[${i}].w < 0.5) {
+      float2 d = (rects[${i}].zw - rects[${i}].xy) * size.xy;
+      float len2 = dot(d, d);
+      float t = dot(pos - rects[${i}].xy * size.xy, d) / len2;
+      a = smoothstep(0.0, 1.0, clamp(t, 0.0, 1.0));
+    } else {
+      float2 st = (pos - rects[${i}].xy * size.xy) / size.x;
+      float ca = cos(-rads[${i}].z);
+      float sa = sin(-rads[${i}].z);
+      float2 r = float2(st.x * ca - st.y * sa, st.x * sa + st.y * ca);
+      float d = length(r / max(rads[${i}].xy, float2(1e-5)));
+      a = 1.0 - smoothstep(max(0.0, 1.0 - rads[${i}].w), 1.0, d);
+    }
+    if (a > 0.0) {
+      c.rgb = mix(c.rgb, maskAdjust(c.rgb, adj[${i}].xyz), half(a));
+    }
+  }
+`;
+
+// The pass. It reads the pixels the pipeline has already built — the grade, the
+// grain, the vignette — and writes the local adjustments back over them, one
+// mask at a time, so a mask over another mask reads the first one's result
+// exactly as a stack of local adjustments does. It runs BEFORE HEAL on purpose:
+// a repair laid inside a mask then borrows pixels that already carry the mask's
+// light, which is what makes it match its surroundings, and a MOSAIC over a mask
+// hides what the mask left. The frame the masks are of comes in as `size`, the
+// same uniform HEAL and MOSAIC take.
+export function gradientMaskSkSL(count: number): string {
+  return `
+uniform shader img;
+uniform float4 rects[${count}];
+uniform float4 rads[${count}];
+uniform float4 adj[${count}];
+uniform float4 size;
+${adjustFn}
+half4 main(float2 pos) {
+  half4 c = img.eval(pos);${Array.from({ length: count }, (_, i) => maskBlock(i)).join('')}
+  return c;
+}
+`;
+}
diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx
index ea692c3..6ca1338 100644
--- a/docker/frontend/src/App.tsx
+++ b/docker/frontend/src/App.tsx
@@ -30,6 +30,7 @@ import {
   type CropRect,
   type FrameId,
   type GPSInfo,
+  type GradientMask,
   type HealSpot,
   type HslBand,
   type HslBandId,
@@ -41,6 +42,7 @@ import { grainPerInch, grainStockFor } from '../shared/utils/grainShader';
 import { curveIsActive } from '../shared/utils/toneCurve';
 import { HEAL_DEFAULT_R } from '../shared/utils/heal';
 import { MOSAIC_DEFAULT_R } from '../shared/utils/mosaic';
+import { MASK_DEFAULT_FEATHER, MASK_EXPOSURE_MAX } from '../shared/utils/gradientMask';
 import type { MsgKey } from './i18n/vi';
 
 // Mirrors the API's MAX_PHOTOS_PER_USER: shown on SAVE PHOTO, enforced there.
@@ -300,6 +302,15 @@ export function Workspace() {
   const [brushTool, setBrushTool] = useState<'heal' | 'mosaic' | null>(null);
   const [healR, setHealR] = useState(HEAL_DEFAULT_R);
   const [mosaicR, setMosaicR] = useState(MOSAIC_DEFAULT_R);
+  // FX's gradient masks: which shape the next drag on the photo lays down (null
+  // for neither), the masks the recipe holds, and which of them is chosen — the
+  // one whose shape is on the photo and whose knobs are in the panel beside it.
+  const [maskTool, setMaskTool] = useState<'linear' | 'radial' | null>(null);
+  const [maskSel, setMaskSel] = useState<number | null>(null);
+  const masks = recipe.adjustments.masks ?? [];
+  // The one mask the column beside the chips speaks about: its shape is on the
+  // photo and its knobs are in the panel. Null while none is chosen.
+  const selMask = maskSel !== null ? masks[maskSel] ?? null : null;
   const healSpots = recipe.adjustments.heal ?? [];
   const mosaicSpots = recipe.adjustments.mosaic ?? [];
   const [sample, setSample] = useState<{ r: number; g: number; b: number } | null>(null);
@@ -978,6 +989,68 @@ export function Workspace() {
     [brushTool, remember, setAdjustment]
   );
 
+  // FX's two gradient masks are a list the user draws rather than a knob, but
+  // they are written the same way the brush's spots are: a shape dragged onto
+  // the photo is one undo step, and the knobs on the chosen shape are one more
+  // however far they travel — the first move of a drag takes the snapshot and
+  // the rest ride on it. An empty list drops the field, the way CLEAR does.
+  const editMasks = useCallback(
+    (list: GradientMask[], undo: boolean) => {
+      if (undo) remember();
+      setAdjustment({ masks: list.length ? list : undefined });
+      setMaskSel(list.length ? Math.min(maskSel ?? 0, list.length - 1) : null);
+    },
+    [maskSel, remember, setAdjustment]
+  );
+  const addMask = useCallback(
+    (mask: GradientMask) => {
+      remember();
+      const list = lookRef.current?.recipe.adjustments.masks ?? [];
+      setAdjustment({ masks: [...list, mask] });
+      // The shape just drawn is the one being edited: its handles and its knobs
+      // are how the drag that made it is finished.
+      setMaskSel(list.length);
+    },
+    [remember, setAdjustment]
+  );
+  const deleteMask = useCallback(() => {
+    if (maskSel === null) return;
+    remember();
+    const list = masks.filter((_, i) => i !== maskSel);
+    setAdjustment({ masks: list.length ? list : undefined });
+    setMaskSel(null);
+  }, [masks, maskSel, remember, setAdjustment]);
+  const clearMasks = useCallback(() => {
+    remember();
+    setAdjustment({ masks: undefined });
+    setMaskSel(null);
+  }, [remember, setAdjustment]);
+  // One knob of the chosen mask, through the same one-edit-per-gesture door as
+  // every other slider. EXP is the spec's own EV (-5..+5); CON and SAT are the
+  // app's -10..+10, which the shader turns into the spec's -1..+1.
+  const setMaskKnob = useCallback(
+    (patch: Partial<GradientMask>) => {
+      if (maskSel === null) return;
+      const list = masks.slice();
+      const cur = list[maskSel];
+      if (!cur) return;
+      list[maskSel] = { ...cur, ...patch };
+      setAdjustmentOnce({ masks: list });
+    },
+    [masks, maskSel, setAdjustmentOnce]
+  );
+  // A mask that leaves the list — RESET, or an older file loaded over it — takes
+  // the selection with it: the knobs must never speak about a shape the photo no
+  // longer holds.
+  useEffect(() => {
+    if (maskSel !== null && maskSel >= masks.length) setMaskSel(null);
+  }, [maskSel, masks.length]);
+  // The knobs of a freshly drawn or newly chosen mask are a new gesture: the
+  // next drag takes its own snapshot instead of riding on the drawing one.
+  useEffect(() => {
+    sliderEditRef.current = false;
+  }, [maskSel]);
+
   // FRAME's STRAIGHTEN rides the same one-edit-per-gesture rule as a knob, so
   // dragging the ruler is one undo step instead of one per degree.
   const setStraightenOnce = useCallback(
@@ -2153,6 +2226,9 @@ export function Workspace() {
       || markStyle.color !== DEFAULT_MARK_STYLE.color || markStyle.size !== DEFAULT_MARK_STYLE.size
       || markStyle.x !== DEFAULT_MARK_STYLE.x || markStyle.y !== DEFAULT_MARK_STYLE.y
       || markStyle.font !== DEFAULT_MARK_STYLE.font
+      // A gradient mask is a change like any other: while one is on the photo,
+      // RESET is the way back to the frame as it was imported.
+      || masks.length > 0
       || useGeotag
       || (Object.keys(DEFAULT_GPS_STYLE) as (keyof GpsStyle)[]).some((k) => gpsStyle[k] !== DEFAULT_GPS_STYLE[k]);
   }, [recipe, simId, frameId, crop, rotation, straighten, markOn, markText, markStyle, useGeotag, gpsStyle]);
@@ -2347,6 +2423,7 @@ export function Workspace() {
             onClick: () => {
               // The tools that take the pointer on the photo never share it.
               setPicking(false);
+              setMaskTool(null);
               setBrushTool((v) => (v === 'heal' ? null : 'heal'));
             },
           },
@@ -2361,12 +2438,31 @@ export function Workspace() {
             amberValue: mosaicSpots.length > 0,
             onClick: () => {
               setPicking(false);
+              setMaskTool(null);
               setBrushTool((v) => (v === 'mosaic' ? null : 'mosaic'));
             },
           },
           ...(mosaicSpots.length
             ? [{ key: 'mosaic-clear', label: 'CLEAR', onClick: clearMosaicSpots }]
             : []),
+          // LINEAR and RADIAL GRADIENT are the tab's other two tools that take
+          // the pointer: a chip arms one and the next drag on the photo lays the
+          // shape down, inside which the column beside it grades the pixels. The
+          // chip carries the shape's own name rather than its count, so CLEAR
+          // below it can, and the pair sits with HEAL and MOSAIC because all
+          // four change the photo where it is rather than the look on top of it.
+          ...(['linear', 'radial'] as const).map((kind): ChipDef => ({
+            key: kind,
+            label: kind.toUpperCase(),
+            active: maskTool === kind,
+            amberValue: masks.some((m) => m.kind === kind),
+            onClick: () => {
+              setPicking(false);
+              setBrushTool(null);
+              setMaskTool((v) => (v === kind ? null : kind));
+            },
+          })),
+          ...(masks.length ? [{ key: 'masks-clear', label: 'CLEAR', onClick: clearMasks }] : []),
           { key: 'mono', label: 'MONOCHROME', active: monoOn, onClick: toggleMono },
           // GRAIN is a strip of its own — amount, size, and the count they add up
           // to — so it is one chip here and its two knobs live inside it; the
@@ -2396,7 +2492,7 @@ export function Workspace() {
           onClick: () => toggleParam(key),
         });
         return [
-          { key: 'hsl-pick', label: 'PICK', active: picking, onClick: () => { setBrushTool(null); setPicking((v) => !v); } },
+          { key: 'hsl-pick', label: 'PICK', active: picking, onClick: () => { setBrushTool(null); setMaskTool(null); setPicking((v) => !v); } },
           ...HSL_BANDS.map((b): ChipDef => {
             const band = recipe.adjustments.hslBands?.[b.id];
             const moved = !!band && (band[0] !== 0 || band[1] !== 0 || band[2] !== 0);
@@ -2671,7 +2767,62 @@ export function Workspace() {
             </div>
           </div>
 
-          {/* column 2 — FRAME's WATERMARK chip opens the two collapses, one per
+          {/* column 2 — FX's GRADIENT MASK, while one is chosen: the shape's own
+              name, the way to take it off the photo, and the three knobs it
+              grades with. A radial mask adds the feather it fades over, since
+              that is the number its rim is made of. */}
+          {selMask ? (
+            <div className="col col-sub strip" data-col="mask">
+              <ChipRow
+                chips={[
+                  { key: 'mask-kind', label: selMask.kind.toUpperCase(), active: true, onClick: () => {} },
+                  { key: 'mask-delete', label: 'DELETE', onClick: deleteMask },
+                ]}
+              />
+              <div className="hsl-card-knobs">
+                <MiniSlider
+                  label="EXP"
+                  value={selMask.exposure}
+                  min={-MASK_EXPOSURE_MAX}
+                  max={MASK_EXPOSURE_MAX}
+                  step={0.1}
+                  prefix="mask-knob"
+                  format={(v) => `${v > 0 ? '+' : ''}${v.toFixed(1)}`}
+                  onChange={(v) => setMaskKnob({ exposure: v })}
+                  onReset={() => setMaskKnob({ exposure: 0 })}
+                />
+                <MiniSlider
+                  label="CON"
+                  value={selMask.contrast}
+                  prefix="mask-knob"
+                  onChange={(v) => setMaskKnob({ contrast: Math.round(v) })}
+                  onReset={() => setMaskKnob({ contrast: 0 })}
+                />
+                <MiniSlider
+                  label="SAT"
+                  value={selMask.saturation}
+                  prefix="mask-knob"
+                  onChange={(v) => setMaskKnob({ saturation: Math.round(v) })}
+                  onReset={() => setMaskKnob({ saturation: 0 })}
+                />
+                {selMask.kind === 'radial' ? (
+                  <MiniSlider
+                    label="FEA"
+                    value={Math.round(selMask.feather * 100)}
+                    min={0}
+                    max={100}
+                    step={5}
+                    prefix="mask-knob"
+                    format={(v) => `${v}%`}
+                    onChange={(v) => setMaskKnob({ feather: v / 100 })}
+                    onReset={() => setMaskKnob({ feather: MASK_DEFAULT_FEATHER })}
+                  />
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+
+          {/* column 2b — FRAME's WATERMARK chip opens the two collapses, one per
               watermark type: the header chip, then that mark's own controls */}
           {wmOpen ? (
             <div className="col col-sub strip wm-extra" data-col="wm">
@@ -2865,6 +3016,12 @@ export function Workspace() {
           onBrushR={setBrushR}
           onBrushSpots={addBrushSpots}
           onBrushEdit={editBrushSpots}
+          maskTool={maskTool}
+          masks={masks}
+          maskSel={maskSel}
+          onMaskSel={setMaskSel}
+          onMaskCreate={addMask}
+          onMaskEdit={editMasks}
           pickPanel={pickPanel}
           pickPanelAt={pickedAt}
           // FRAME's custom mark owns a box on the photo while its panel is
diff --git a/docker/frontend/src/engine/exportEngine.ts b/docker/frontend/src/engine/exportEngine.ts
index 0eeeebf..ebb8320 100644
--- a/docker/frontend/src/engine/exportEngine.ts
+++ b/docker/frontend/src/engine/exportEngine.ts
@@ -36,6 +36,7 @@ import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from '../../shared/uti
 import { CURVE_SKSL, CURVE_LUT_SIZE, curveIsActive, curveLut } from '../../shared/utils/toneCurve';
 import { healSkSL, healUniforms, readHeal } from '../../shared/utils/heal';
 import { mosaicSkSL, mosaicUniforms, readMosaic } from '../../shared/utils/mosaic';
+import { gradientMaskSkSL, maskUniforms, readMasks } from '../../shared/utils/gradientMask';
 import {
   GRAIN_SKSL,
   HALATION_SKSL,
@@ -180,6 +181,19 @@ function mosaicEffectFor(count: number): any {
   return effect;
 }
 
+// FX's gradient masks are the third shader of that kind — the shapes and the
+// knobs are the recipe's, so it is built for the count it is handed and cached
+// by count the same way (shared/utils/gradientMask.ts).
+const maskEffects = new Map<number, any>();
+function maskEffectFor(count: number): any {
+  let effect = maskEffects.get(count);
+  if (effect === undefined) {
+    effect = Skia.RuntimeEffect.Make(gradientMaskSkSL(count)) ?? null;
+    maskEffects.set(count, effect);
+  }
+  return effect;
+}
+
 // CLARITY_SKSL uniforms are (a, px.x, px.y); px = one source pixel = 1 unit on
 // a 1:1 export canvas, so the radius matches what the preview tuned.
 function convolvePaint(srcImage: any, amount: number): any {
@@ -652,7 +666,39 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
       }
     }
 
-    // 6d. HEAL — the FX tab's dust brush (see heal.ts). It is the last thing
+    // 6d. The gradient masks — FX's LINEAR / RADIAL GRADIENT (see
+    // gradientMask.ts). The three knobs each shape carries are applied through
+    // that shape's own alpha, masks in the order they were drawn, so the second
+    // reads what the first left. It sits here, after the frame-wide grade and
+    // before HEAL, because a local adjustment is part of the look and not a
+    // repair: the pixels a repair borrows are meant to carry it already.
+    const masks = readMasks(adjustments.masks);
+    if (masks.length) {
+      const effect = maskEffectFor(masks.length);
+      flush(surface);
+      const snap = own(surface.makeImageSnapshot());
+      const child = snap
+        ? own(
+            snap.makeShaderOptions(
+              Skia.TileMode.Clamp, Skia.TileMode.Clamp, Skia.FilterMode.Linear, Skia.MipmapMode.None
+            )
+          )
+        : null;
+      const shader =
+        effect && child
+          ? own(effect.makeShaderWithChildren(maskUniforms(masks, width, height), [child]))
+          : null;
+      if (shader) {
+        // Same shape as the two passes below: the shader reads the frame it is
+        // about to overwrite, so the surface is snapshotted, cleared and redrawn.
+        canvas.clear(Skia.Color('transparent'));
+        const maskPaint = own(Skia.Paint());
+        maskPaint.setShader(shader);
+        canvas.drawRect(Skia.XYWHRect(0, 0, width, height), maskPaint);
+      }
+    }
+
+    // 6e. HEAL — the FX tab's dust brush (see heal.ts). It is the last thing
     // that touches the photo's own pixels, and deliberately so: the borrowed
     // patch is copied out of the pixels the pipeline has already built, so a
     // repair matches the grade, the blur and the grain around it by
@@ -688,7 +734,7 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
       }
     }
 
-    // 6e. MOSAIC — the FX tab's hiding brush (see mosaic.ts). It comes after
+    // 6f. MOSAIC — the FX tab's hiding brush (see mosaic.ts). It comes after
     // HEAL because hiding is the last thing the photo's own pixels are asked
     // for: a repair under a hidden patch is work nobody will ever see, and the
     // snapshot this pass reads already carries the repairs. It is a hard-edged
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 99101e7..eb0f790 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -529,6 +529,49 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   pointer-events: auto;
 }
 .brush-del:hover { background: var(--accent); }
+/* FX's gradient masks — LINEAR and RADIAL GRADIENT, one layer. It takes the
+   pointer while a mask tool is armed, so a drag draws the next shape instead of
+   panning the photo; the shapes already on the photo answer only through their
+   own pin and handles, which is what lets a press mean "take hold of this one"
+   rather than "draw another". */
+.mask-layer {
+  position: absolute;
+  border-radius: var(--radius-sm);
+  cursor: crosshair;
+  touch-action: none;
+}
+/* The shape's own outline, over the photo and never in front of the pointer: the
+   pin and the handles are the only things on this layer to press. */
+.mask-shape {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
+}
+.mask-line { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1; }
+/* An ellipse's rim, and inside it the ellipse its feather fades to — so the
+   hand the shape has on the photo is visible before the knobs are moved. */
+.mask-ring { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1; }
+.mask-ring.feather { stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 4 4; }
+/* The pin that moves the whole shape, and the handles that resize it. Both are
+   the pointer's own, and both keep a screen size of their own whatever the zoom
+   (the layer's transform is taken back out of them). */
+.mask-pin,
+.mask-handle {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border: 1px solid rgba(0, 0, 0, 0.55);
+  background: rgba(255, 255, 255, 0.9);
+  pointer-events: auto;
+  cursor: move;
+}
+.mask-pin { border-radius: 50%; }
+.mask-handle { border-radius: 2px; }
+.mask-handle.rot { border-radius: 50%; cursor: grab; }
 /* The mixer's readout: the sampled swatch, its RGB and HSL, and the band the
    ruler is pointed at. */
 .hsl-readout {
diff --git a/docker/frontend/src/ui/ChipColumn.tsx b/docker/frontend/src/ui/ChipColumn.tsx
index 17d655d..832ae45 100644
--- a/docker/frontend/src/ui/ChipColumn.tsx
+++ b/docker/frontend/src/ui/ChipColumn.tsx
@@ -129,16 +129,29 @@ export function SliderRow({ slider }: { slider: SliderDef }) {
 }
 
 // The same ruler without its own column: one knob of the mixer's inline panel,
-// where HUE/SAT/LUM sit side by side under the colour they are moving. Wheel
-// steps it, double-click puts it back to 0.
+// where HUE/SAT/LUM sit side by side under the colour they are moving — and, in
+// the same shape, the knobs a gradient mask carries. Wheel steps it, double-click
+// puts it back to 0. A mask's knobs are not the mixer's -10..+10 integers (an
+// exposure is a stop, a feather is a percentage), so the range and the readout
+// come in with them; the defaults are the mixer's own, unchanged.
 export function MiniSlider({
   label,
   value,
+  min = -10,
+  max = 10,
+  step = 1,
+  prefix = 'hsl-knob',
+  format,
   onChange,
   onReset,
 }: {
   label: string;
   value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  prefix?: string;
+  format?: (value: number) => string;
   onChange: (value: number) => void;
   onReset: () => void;
 }) {
@@ -154,25 +167,25 @@ export function MiniSlider({
       e.preventDefault();
       e.stopPropagation();
       const s = live.current;
-      const next = Math.max(-10, Math.min(10, s.value + (e.deltaY < 0 ? 1 : -1)));
+      const next = Math.max(min, Math.min(max, s.value + (e.deltaY < 0 ? step : -step)));
       if (next !== s.value) s.onChange(next);
     };
     el.addEventListener('wheel', onWheel, { passive: false });
     return () => el.removeEventListener('wheel', onWheel);
-  }, []);
+  }, [min, max, step]);
   return (
-    <div className="mini-slider" ref={ref} data-key={`hsl-knob-${label}`}>
+    <div className="mini-slider" ref={ref} data-key={`${prefix}-${label}`}>
       <div className="mini-head">
         <span>{label}</span>
-        <b className={value !== 0 ? 'amber' : ''} data-key={`hsl-knob-${label}-value`}>
-          {value > 0 ? `+${value}` : String(value)}
+        <b className={value !== 0 ? 'amber' : ''} data-key={`${prefix}-${label}-value`}>
+          {format ? format(value) : value > 0 ? `+${value}` : String(value)}
         </b>
       </div>
       <input
         type="range"
-        min={-10}
-        max={10}
-        step={1}
+        min={min}
+        max={max}
+        step={step}
         value={value}
         aria-label={label}
         onChange={(e) => onChange(Number(e.target.value))}
diff --git a/docker/frontend/src/ui/ImageStage.tsx b/docker/frontend/src/ui/ImageStage.tsx
index 5b1b388..3d1720c 100644
--- a/docker/frontend/src/ui/ImageStage.tsx
+++ b/docker/frontend/src/ui/ImageStage.tsx
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useI18n } from '../i18n/I18nProvider';
-import { MIN_CROP_FRAC, type CropRect, type HealSpot, type MosaicSpot } from '../../shared/types';
+import { MIN_CROP_FRAC, type CropRect, type GradientMask, type HealSpot, type MosaicSpot } from '../../shared/types';
 import { bitmapReader, samplePixel } from '../engine/imageOps';
 import { findHealSource } from '../../shared/utils/heal';
+import { MASK_DEFAULT_FEATHER, MASK_MIN } from '../../shared/utils/gradientMask';
 import { BRUSH_SPACING, wheelBrushR } from '../../shared/utils/brush';
 import { measureMark } from '../engine/exportEngine';
 import { Histogram } from './Histogram';
@@ -117,6 +118,85 @@ const strokeRuns = (spots: { x: number; y: number; r: number }[], box: { width:
   return { paths, joined };
 };
 
+// FX's gradient masks, the part of them that is geometry: which handle a press
+// took hold of, and where that handle's move leaves the shape.
+type MaskPart = 'move' | 'p0' | 'p1' | 'rx' | 'ry' | 'rot';
+
+// The centre a mask is pinned and moved by: an ellipse's own centre, and the
+// middle of a linear ramp — where Lightroom puts its pin too, since the shape is
+// dragged as one thing from there.
+const maskPin = (m: GradientMask) => (m.kind === 'radial' ? { x: m.x, y: m.y } : { x: (m.x + m.ex) / 2, y: (m.y + m.ey) / 2 });
+
+// The shape a drag lays down. Both ends are already fractions of the render (the
+// brush's own point), so the mask costs no conversion: a linear one IS the drag,
+// and a radial one is the centre the press landed on plus the radius the drag
+// reached, its axis lying along the direction the hand went — the ellipse a
+// radial mask starts life as is the circle that drag describes. Too short a drag
+// is not a shape at all: nothing is laid down, the way a press with the brush is
+// not a stroke.
+const maskFromDrag = (
+  kind: 'linear' | 'radial',
+  a: { fx: number; fy: number },
+  b: { fx: number; fy: number },
+  box: { width: number; height: number }
+): GradientMask | null => {
+  const dx = (b.fx - a.fx) * box.width;
+  const dy = (b.fy - a.fy) * box.height;
+  const r = Math.hypot(dx, dy) / box.width;
+  if (r < MASK_MIN) return null;
+  const common = { exposure: 0, contrast: 0, saturation: 0 };
+  if (kind === 'linear') {
+    return { kind, x: a.fx, y: a.fy, ex: b.fx, ey: b.fy, rx: 0, ry: 0, angle: 0, feather: 0, ...common };
+  }
+  return {
+    kind,
+    x: a.fx,
+    y: a.fy,
+    ex: a.fx,
+    ey: a.fy,
+    rx: r,
+    ry: r,
+    angle: Math.atan2(dy, dx),
+    feather: MASK_DEFAULT_FEATHER,
+    ...common,
+  };
+};
+
+// One handle's move, as the shape it leaves. The two ends of a linear ramp are
+// themselves; a radial mask resizes along the ellipse's OWN axes — the pointer
+// is projected onto the axis the handle rides, so a hand that wanders across it
+// does not shrink it — and its rotation handle sits on the +ry axis, so the
+// angle is simply the direction from the centre to the pointer, one quarter turn
+// back. 'move' takes the whole of it, the pin's own drag.
+const maskDragged = (
+  m: GradientMask,
+  part: MaskPart,
+  p: { fx: number; fy: number },
+  box: { width: number; height: number }
+): GradientMask => {
+  const dx = (p.fx - m.x) * box.width;
+  const dy = (p.fy - m.y) * box.height;
+  switch (part) {
+    case 'p0':
+      return { ...m, x: p.fx, y: p.fy };
+    case 'p1':
+      return { ...m, ex: p.fx, ey: p.fy };
+    case 'move': {
+      // The whole shape by the same delta: the ends of a ramp travel with its
+      // middle, and an ellipse travels with its centre.
+      const ddx = p.fx - m.x;
+      const ddy = p.fy - m.y;
+      return { ...m, x: p.fx, y: p.fy, ex: m.ex + ddx, ey: m.ey + ddy };
+    }
+    case 'rot':
+      return { ...m, angle: Math.atan2(dy, dx) - Math.PI / 2 };
+    case 'rx':
+      return { ...m, rx: Math.max(MASK_MIN, Math.abs(dx * Math.cos(m.angle) + dy * Math.sin(m.angle)) / box.width) };
+    default:
+      return { ...m, ry: Math.max(MASK_MIN, Math.abs(-dx * Math.sin(m.angle) + dy * Math.cos(m.angle)) / box.width) };
+  }
+};
+
 // The centre column: drop target, preview canvas, and the PEEK comparison.
 // Dragging a photo anywhere on the page works, not just on the frame — the
 // whole stage is the drop zone.
@@ -160,6 +240,12 @@ export function ImageStage({
   onBrushR,
   onBrushSpots,
   onBrushEdit,
+  maskTool = null,
+  masks = [],
+  maskSel = null,
+  onMaskSel,
+  onMaskCreate,
+  onMaskEdit,
   dims = null,
 }: {
   previewUrl: string | null;
@@ -227,6 +313,22 @@ export function ImageStage({
   // — which is what makes a drag one undo step and a press that only selects
   // one cost no step at all.
   onBrushEdit?: (spots: (HealSpot | MosaicSpot)[], undo: boolean) => void;
+  // FX's gradient masks — LINEAR and RADIAL GRADIENT. The tool is armed by a
+  // chip; one drag lays one shape down, and from then on the shape is a thing on
+  // the photo: a pin to move it by and, for the one that is chosen, the handles
+  // that resize it (the two ends of a ramp; an ellipse's two axes and its
+  // rotation). The knobs each mask carries are not here — they are the panel
+  // beside the photo, and they reach the render the same way every other slider
+  // does.
+  maskTool?: 'linear' | 'radial' | null;
+  masks?: GradientMask[];
+  maskSel?: number | null;
+  onMaskSel?: (i: number | null) => void;
+  onMaskCreate?: (mask: GradientMask) => void;
+  // A shape being moved or resized: the list the photo now holds, and whether
+  // this is the change the gesture started with — the same one-undo-per-drag
+  // rule the brush's own edit follows.
+  onMaskEdit?: (masks: GradientMask[], undo: boolean) => void;
   // The photo's own pixel size, as the stage stands: the file's shape turned by
   // the quarter turn and cut by a committed crop, so the number in the row under
   // the photo is the resolution an export at the photo's own size renders.
@@ -343,7 +445,7 @@ export function ImageStage({
   }, []);
 
   useEffect(() => {
-    if (!cropEditing && !compare && !picking && !pickPanelAt && !wmCount && !showStraighten && !showCurve && !brushTool) {
+    if (!cropEditing && !compare && !picking && !pickPanelAt && !wmCount && !showStraighten && !showCurve && !brushTool && !maskTool) {
       setBox(null);
       return;
     }
@@ -364,7 +466,7 @@ export function ImageStage({
       ro?.disconnect();
       window.removeEventListener('resize', measure);
     };
-  }, [cropEditing, compare, picking, pickPanelAt, wmCount, showStraighten, showCurve, brushTool, measure, previewUrl]);
+  }, [cropEditing, compare, picking, pickPanelAt, wmCount, showStraighten, showCurve, brushTool, maskTool, measure, previewUrl]);
 
   const grabPanel = (e: React.PointerEvent<HTMLDivElement>) => {
     e.stopPropagation(); // the photo must not pan under the card
@@ -815,6 +917,164 @@ export function ImageStage({
     return () => el.removeEventListener('wheel', onWheel);
   }, [onBrushR, brushR, brushTool, box, zoomAt]);
 
+  // --- FX's gradient masks ---------------------------------------------------
+  // A mask is drawn rather than painted: one drag is one shape, and the drag's
+  // two ends are what is stored (the ramp of a linear mask, the centre and the
+  // radius of a radial one). The draft is that drag while it is happening, so
+  // the shape can be seen before it is let go; the flags below are the gesture's
+  // own undo boundary, the same one the brush's grab keeps.
+  const [draft, setDraft] = useState<{ a: BrushPoint; b: BrushPoint } | null>(null);
+  const maskGrab = useRef<{ i: number; part: MaskPart } | null>(null);
+  const maskUndo = useRef(false);
+
+  const maskDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!onMaskCreate || !maskTool) return;
+    const p = brushPoint(e.clientX, e.clientY);
+    if (!p) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDraft({ a: p, b: p });
+  };
+
+  const maskMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draft) return;
+    const p = brushPoint(e.clientX, e.clientY);
+    // Off the photo the end stays where it was, the brush's own rule: a shape is
+    // a place on the picture, and a pointer past the frame has left it.
+    if (p) setDraft({ a: draft.a, b: p });
+  };
+
+  const maskUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.currentTarget.hasPointerCapture?.(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+    const d = draft;
+    setDraft(null);
+    if (!d || !onMaskCreate || !maskTool || !box) return;
+    const mask = maskFromDrag(maskTool, d.a, d.b, box);
+    if (mask) onMaskCreate(mask);
+  };
+
+  // A pin or a handle: the press is on a shape already on the photo, so it takes
+  // hold of that shape rather than drawing a new one. The handler stops the event
+  // where it is, because the layer underneath would read the same press as the
+  // start of a drag.
+  const grabMask = (i: number, part: MaskPart, e: React.PointerEvent<HTMLElement>) => {
+    if (!onMaskEdit) return;
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    maskGrab.current = { i, part };
+    maskUndo.current = false;
+    onMaskSel?.(i);
+  };
+
+  const moveMask = (e: React.PointerEvent<HTMLElement>) => {
+    const g = maskGrab.current;
+    const was = g ? masks[g.i] : null;
+    if (!g || !was || !onMaskEdit || !box) return;
+    const p = brushPoint(e.clientX, e.clientY);
+    if (!p) return;
+    const next = masks.slice();
+    next[g.i] = maskDragged(was, g.part, p, box);
+    onMaskEdit(next, !maskUndo.current);
+    maskUndo.current = true;
+  };
+
+  const endMask = (e: React.PointerEvent<HTMLElement>) => {
+    // A press that never travelled is a choice, not an edit: nothing was
+    // written, so the caller is not asked for a step.
+    maskGrab.current = null;
+    if (e.currentTarget.hasPointerCapture?.(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+
+  // Where a mask's own geometry falls on the photo, as the fractions the layer
+  // places in %: a point along `u` is rx from the centre at the rim and one along
+  // `v` is ry, which is the ellipse's own frame — the same frame the shader
+  // rotates a pixel into. Both semi-axes are fractions of the WIDTH (the
+  // renderer's own measurement, so an ellipse stays the same ellipse on any
+  // photo shape), which is why a y offset is turned back into a fraction of the
+  // height here. The rotation handle rides just outside the +ry axis, a fixed
+  // number of SCREEN pixels clear of the rim, so it stays reachable at any zoom.
+  const maskGeom = (m: GradientMask) => {
+    const u = { x: Math.cos(m.angle), y: Math.sin(m.angle) };
+    const v = { x: -Math.sin(m.angle), y: Math.cos(m.angle) };
+    const w = box?.width ?? 0;
+    const k = box && box.height > 0 ? box.width / box.height : 1;
+    const clear = 24 / Math.max(1, view.s) / Math.max(1, w);
+    const at = (dx: number, dy: number) => ({ x: m.x + dx, y: m.y + dy * k });
+    return {
+      at,
+      axis: (sx: number, sy: number) =>
+        at(sx * m.rx * u.x + sy * m.ry * v.x, sx * m.rx * u.y + sy * m.ry * v.y),
+      rot: at(v.x * (m.ry + clear), v.y * (m.ry + clear)),
+    };
+  };
+
+  const selMask = maskSel !== null && maskSel >= 0 && maskSel < masks.length ? masks[maskSel] : null;
+  const selGeom = selMask && box ? maskGeom(selMask) : null;
+  // A handle keeps a screen size of its own whatever the zoom, the way the × the
+  // brush lays on a chosen spot does: a shape aimed at a zoom is a shape whose
+  // handles have to stay reachable at one.
+  const maskScale = { transform: `translate(-50%, -50%) scale(${1 / view.s})` };
+
+  // The outline of a mask's own maths, drawn where the render will read it — a
+  // linear ramp is the drag's two ends and the middle its smoothstep turns at,
+  // and an ellipse is its rim plus the inner ellipse the alpha fades to. The
+  // ellipse's semi-axes are fractions of the WIDTH, like HEAL's radius, so both
+  // of them are that times the box's width in the layer's own pixels.
+  const maskShape = (m: GradientMask | null) =>
+    m && box ? (
+      <svg
+        className="mask-shape"
+        data-key="mask-shape"
+        data-kind={m.kind}
+        viewBox={`0 0 ${box.width} ${box.height}`}
+        aria-hidden="true"
+      >
+        {m.kind === 'linear'
+          ? (() => {
+              // The three lines are drawn across the drag, so the ramp reads as
+              // the direction it falls in rather than as one more line on the
+              // photo: a tick at each end and one where the hand let go.
+              const p0 = { x: m.x * box.width, y: m.y * box.height };
+              const p1 = { x: m.ex * box.width, y: m.ey * box.height };
+              const len = Math.hypot(p1.x - p0.x, p1.y - p0.y) || 1;
+              const n = { x: -(p1.y - p0.y) / len, y: (p1.x - p0.x) / len };
+              const L = Math.hypot(box.width, box.height) / 2;
+              const ticks = [p0, { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 }, p1];
+              return (
+                <g>
+                  {ticks.map((t, i) => (
+                    <line
+                      key={i}
+                      className="mask-line"
+                      x1={t.x - n.x * L}
+                      y1={t.y - n.y * L}
+                      x2={t.x + n.x * L}
+                      y2={t.y + n.y * L}
+                    />
+                  ))}
+                </g>
+              );
+            })()
+          : (() => {
+              const cx = m.x * box.width;
+              const cy = m.y * box.height;
+              const rx = m.rx * box.width;
+              const ry = m.ry * box.width;
+              return (
+                <g transform={`rotate(${(m.angle * 180) / Math.PI} ${cx} ${cy})`}>
+                  <ellipse className="mask-ring" cx={cx} cy={cy} rx={rx} ry={ry} />
+                  <ellipse
+                    className="mask-ring feather"
+                    cx={cx}
+                    cy={cy}
+                    rx={rx * (1 - m.feather)}
+                    ry={ry * (1 - m.feather)}
+                  />
+                </g>
+              );
+            })()}
+      </svg>
+    ) : null;
+
   // A new photo, or the frame coming up or going down (APPLY, CANCEL, UNDO),
   // puts the view back on the fit.
   useEffect(() => {
@@ -1347,6 +1607,106 @@ export function ImageStage({
               ) : null}
             </div>
           ) : null}
+          {/* FX's gradient masks — LINEAR and RADIAL GRADIENT. The layer takes
+              the pointer while a mask tool is armed: a drag anywhere on the photo
+              draws the next shape, and its two ends are the shape's own numbers,
+              so what is being drawn is visible while it is drawn. Every mask on
+              the photo keeps a pin — the handle it is moved by, and how one of
+              them is chosen at all — and the chosen one adds the outline of what
+              the render will do (the two ends of a linear ramp and the ramp
+              between them; an ellipse and the inner ellipse its feather fades
+              to) plus the handles that resize it. */}
+          {maskTool && !cropEditing && box ? (
+            <div
+              className="mask-layer"
+              data-key="mask-layer"
+              data-tool={maskTool}
+              style={{
+                left: box.left,
+                top: box.top,
+                width: box.width,
+                height: box.height,
+                transform:
+                  view.s === 1 ? undefined : `translate(${view.x}px, ${view.y}px) scale(${view.s})`,
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                maskDown(e);
+              }}
+              onPointerMove={maskMove}
+              onPointerUp={maskUp}
+              onPointerCancel={() => setDraft(null)}
+            >
+              {maskShape((() => {
+                // The shape under the hand right now: the same construction the
+                // gesture will store, drawn before it is let go.
+                if (!draft) return null;
+                return maskFromDrag(maskTool, draft.a, draft.b, box);
+              })())}
+              {masks.map((m, i) => (
+                <span key={i}>
+                  {i === maskSel ? maskShape(m) : null}
+                  {(() => {
+                    const pin = maskPin(m);
+                    return (
+                      <span
+                        className="mask-pin"
+                        data-key="mask-pin"
+                        data-i={i}
+                        data-kind={m.kind}
+                        style={{
+                          left: `${pin.x * 100}%`,
+                          top: `${pin.y * 100}%`,
+                          ...maskScale,
+                        }}
+                        onPointerDown={(e) => grabMask(i, 'move', e)}
+                        onPointerMove={moveMask}
+                        onPointerUp={endMask}
+                        onPointerCancel={endMask}
+                      />
+                    );
+                  })()}
+                </span>
+              ))}
+              {selMask && selGeom
+                ? selMask.kind === 'linear'
+                  ? ([
+                      { part: 'p0' as const, at: { x: selMask.x, y: selMask.y }, k: 'l0' },
+                      { part: 'p1' as const, at: { x: selMask.ex, y: selMask.ey }, k: 'l1' },
+                    ].map(({ part, at, k }) => (
+                      <span
+                        key={k}
+                        className="mask-handle"
+                        data-key={`mask-handle-${part}`}
+                        style={{ left: `${at.x * 100}%`, top: `${at.y * 100}%`, ...maskScale }}
+                        onPointerDown={(e) => grabMask(maskSel as number, part, e)}
+                        onPointerMove={moveMask}
+                        onPointerUp={endMask}
+                        onPointerCancel={endMask}
+                      />
+                    )))
+                  : ([
+                      { part: 'rx' as const, at: selGeom.axis(1, 0), k: 'x1' },
+                      { part: 'rx' as const, at: selGeom.axis(-1, 0), k: 'x2' },
+                      { part: 'ry' as const, at: selGeom.axis(0, 1), k: 'y1' },
+                      { part: 'ry' as const, at: selGeom.axis(0, -1), k: 'y2' },
+                      { part: 'rot' as const, at: selGeom.rot, k: 'rot' },
+                    ].map(({ part, at, k }) => (
+                      <span
+                        key={k}
+                        className={`mask-handle${part === 'rot' ? ' rot' : ''}`}
+                        data-key={`mask-handle-${part}-${k}`}
+                        style={{ left: `${at.x * 100}%`, top: `${at.y * 100}%`, ...maskScale }}
+                        onPointerDown={(e) => grabMask(maskSel as number, part, e)}
+                        onPointerMove={moveMask}
+                        onPointerUp={endMask}
+                        onPointerCancel={endMask}
+                      />
+                    )))
+                : null}
+            </div>
+          ) : null}
+
           {/* The mixer's panel for the colour the eyedropper just read: it hangs
               on the photo at the point it was read from, and its swatch follows
               the three knobs under it. */}