Gradient Overlays and Fades

Imgix Video can burn a color gradient into a video: a dark scrim behind a caption, a brand-color wash, a vignette, or edges that fade into a solid color. The gradient is part of the delivered pixels, so the player needs no CSS layered over it. Video uses the same gradient and fade parameters as Imgix images, with the same CSS geometry, so one URL looks the same on a still and on the video.

?fm=mp4&gradient=00000000,cc000000                      # bottom scrim: clear to 80% black
?fm=mp4&gradient=ff0044cc,00000000&gradient-angle=90    # brand wash from the left
?fm=mp4&fade-bottom=0.3                                 # bottom 30% fades to black

A CSS gradient layered over a <video> element covers the device’s native playback controls and has to be rebuilt in every player and app that shows the video. A burned-in gradient travels with the file to every player, social share, and download, keeps captions and lower thirds legible over bright footage, and keeps a brand treatment consistent across stills and video.

video-filter=darken dims the whole frame evenly, and video-vfx-vignette applies a fixed radial darkening. A gradient lets you choose where the frame is dimmed, in which direction, and in which color.

Render trigger. These parameters don’t render on their own. Pass an output too: fm=mp4, fm=hls, fm=gif, a thumbnail, and so on.

Colors are AARRGGBB. As everywhere in Imgix, an 8-digit color puts alpha first: cc000000 is 80% black, and ff0044cc is opaque blue. 00000000 is fully transparent, whatever color digits follow.

Compose order. The gradient composites over the graded video, after video-filter, the LUT, and VFX. Picture-in-picture, watermarks, burned-in text, captions, and the progress bar all draw on top of it, so text sits on the scrim and isn’t dimmed by it:

grade → VFX → gradient / fade → picture-in-picture → watermarks → text and captions → progress bar

Parameters

Gradient

Fade

Watermark gradient and fade

Lengths follow the Imgix literal rule: a decimal from 0 to 1 with exactly one . (such as 0.3) is a fraction, and anything else is pixels. So 1 is 1 pixel and 1.0 is the full width.

A value that doesn’t parse is ignored; the request never fails. If no valid gradient or fade is set, the video renders unchanged.

What Each Mode Draws

• Color gradient (the default): the stops are drawn over the picture at their own alpha. A clear-to-black scrim darkens one side, an opaque wash tints everything, and gradient-alpha turns the whole effect down.
• Gradient mask (gradient-mask=true): the picture fades into bg wherever the stops are transparent. gradient=ffffffff,00ffffff&gradient-mask=true&gradient-type=radial keeps the middle and fades the edges to black, for an elliptical vignette.
• Edge fade (fade): each edge ramps linearly into bg.

A gradient and a fade can be used together. The fade applies after the gradient, as it does on images.

Mask and fade on video fade into a color, not to transparency. Video outputs have no alpha channel, so where an image would turn transparent, a video shows bg. bg defaults to black on video. On stills it defaults to white for opaque formats and to transparent for formats with alpha, as on images. Pass bg explicitly if a still and its video must match. See bg for the full list.

Interactions

• fit=fill. On video, the gradient, mask, and fade cover the picture, not the fill background: a bottom scrim on a letterboxed portrait output darkens the bottom of the video, not the bar below it. On a still they cover the whole canvas, fill included, as on images. To make the bars blend in, set fill-color to match the scrim’s end color.
• mask=corners and mask=ellipse. With either mask, a bare fade belongs to the mask: on images it feathers the mask’s edge. Video draws no mask, so in that case a bare fade draws nothing and only fade-left, fade-right, fade-top, and fade-bottom fade the edges. This keeps one URL consistent between a still and the video.
• Text gradients. txt-gradient fills the text itself, while gradient draws a scrim behind it. gradient-angle and txt-gradient-angle share the same CSS convention.

Outputs

Gradients and fades apply to MP4/WebM, HLS/DASH, animated GIF/WebP/AVIF/JXL/APNG, still thumbnails, audiograms (over the canvas, under the waveform), the preview reel, and multi-asset assemblies.

• HLS/DASH. The gradient is drawn once, before the rendition ladder, so every rendition carries it. Pixel lengths (such as fade-bottom=100, or a pixel radius or center) are measured on the top rendition, and smaller renditions scale them down with the picture. Use fractions (such as fade-bottom=0.2) for sizes that look the same in every format.
• Spritesheets ignore gradients and fades, as they ignore watermarks. For a poster with the scrim, use a thumbnail (fm=jpg&video-thumbnail=...).
• Audio-only outputs have no picture to draw on.
• 8-bit outputs are dithered, so a long dark scrim over a flat sky doesn’t step into bands.
• Stills and animations rendered from a video apply image adjustments (such as blur, hue, and sat) after the gradient, fade, watermarks, and text. On an Imgix image, they apply before.
• Performance. The gradient is rendered once per request and composited on the GPU for every frame. With gradient-mode=normal it costs about as much as a static watermark; other blend modes blend per pixel and cost more.

https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=hls&gradient=00000000,cc000000
https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=jpg&video-thumbnail=2&gradient=00000000,cc000000

HDR. The gradient is drawn in the video’s own signal, with your colors at reference white (203 nits). A white stop appears as paper white rather than at the display’s peak brightness, and a black scrim is black in every format. With the default video-tonemap setting, the gradient is tonemapped with the video, so a white stop lands where the video’s own paper white lands. With video-tonemap=passthrough, the output stays HDR and the gradient stays at reference white. On Dolby Vision profile 5 sources, neutral stops stay neutral but colored stops may shift.

Watermark Gradients and Fades

The same parameters work on an image watermark, prefixed with mark-: mark-gradient with its mark-gradient-* companions, and mark-fade with mark-fade-left, mark-fade-right, mark-fade-top, and mark-fade-bottom. They follow the watermark’s layer index: mark-fade[1] belongs to mark[1], and a layer never borrows the bare spelling.

• They draw on the watermark itself, after mark-w/mark-h and mark-alpha, before it is placed. Lengths are the watermark’s own: pixels of the sized watermark, or fractions of its width or height.
• A color gradient tints the watermark where it is visible; its transparent parts stay transparent. It blends using mark-gradient-mode, as the video’s gradient blends using gradient-mode.
• mark-gradient-mask and mark-fade fade the watermark to transparent, never into a color, because a watermark has no bg.
• Animated (GIF/APNG) watermarks fade on every frame.

https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=mp4&mark=https%3A%2F%2Fassets.imgix.net%2Fpresskit%2Fimgix-presskit.pdf%3Fpage%3D3%26fm%3Dpng%26w%3D200&mark-w=200&mark-align=middle,center&mark-gradient=ffff0000,ff0000ff

Troubleshooting