Gradients: settings and best results

What does Gradients do?

Gradients makes soft mesh gradients from scratch: smooth fields of color for wallpapers, slide backgrounds, website headers and social posts. You start from a preset, change the colors and move them around, add a finish such as film grain or a paper texture, and export a PNG image or a looping MP4 or WebM video. Everything happens on your own computer.

Gradients opens as a Studio: the presets and settings on the left, and a large live preview on the right. You do not add any files. What you see in the preview is what you export, at the size you choose.

01Step 1: Open Gradients and pick a preset

Click Tools in the sidebar, open the Create tab and click Gradients in the From scratch section. You can also type "gradient" in the search box at the top.

The Studio opens on the Presets tab with 32 presets in four groups: Light studies, Pigment, Satin and After dark. The first one, Opal Fold, is selected. Click any preset to load it. A preset sets the colors, their positions, the color field, the finish and the amount of Drift. It keeps your canvas size, Speed, Loop duration and Frame rate.

Click New variation at the top for a fresh take on the same look: the colors stay, and every color point moves a little.

1234

1. 1Opal Fold
2. 2Canvas size
3. 3New variation
4. 4Play

02Step 2: Change the colors and their positions

Open the Adjust tab. Under Colors & composition, each dot is one color in the gradient. Click a dot to change its color, or type a hex code in the picker. Click the plus button to add a color, up to 10. To remove one, click its dot and then Remove color. A gradient needs at least 2 colors.

Turn on Adjust position to see a round handle for each color on the preview. Drag a handle to move that color. You can also click a handle and use the arrow keys, holding Shift to move further.

Then shape how the colors meet:

• Blend: low values give tight, defined pools of color. High values blend them softly.
• Flow: bends the edges between colors into organic curves.
• Color field: Pool spreads color around each point. Sweep makes broad, curving sweeps. Contour makes curved bands. Sweep and Contour add Direction, Curvature and Reach.

As soon as you change the look, the bar above the preview says Edited next to the preset name. Click the reset button next to it to go back to the preset.

123456

1. 1Colors
2. 2Adjust position
3. 3Color handle
4. 4Color field
5. 5Film grain
6. 6Drift

06Step 6: Export a PNG or a video

Click Export at the top right and pick PNG, MP4 or WebM. Then choose a folder. Gradients asks for a folder on every export.

123

1. 1PNG
2. 2MP4
3. 3WebM

• PNG saves the gradient as it looks in the preview right now, at full size. If you played and paused, you get the paused moment.
• MP4 and WebM save one full loop. A progress bar shows the frames being made, then the video being saved. Click Cancel to stop. Larger sizes and longer loops take longer.

When it is done, a message such as Exported gradient-17-1.png appears at the bottom right, and an Open folder button appears at the top. Files are named after the gradient’s variation number, for example gradient-17-1.png or gradient-17-1.mp4.

12

1. 1Exported
2. 2Open folder

Every setting, and when to change it

Presets set most of these values. Some settings only appear when they apply, such as Direction for Sweep and Contour, or Grain size when Film grain is above 0.

Presets

A starting look: colors, positions, color field, finish and Drift. Your canvas size and video settings stay.

• Range32 in four groups
• DefaultOpal Fold

New variation

Moves every color point a little for a fresh take on the same colors and finish.

Colors

The colors in the gradient. Click a dot to change it, the plus button to add one.

• Range2 to 10
• DefaultSet by the preset

Adjust position

Shows a handle for each color on the preview so you can drag it into place.

• DefaultOff

Blend

Low gives tight pools of color, high blends them softly.

• Range0 to 1.20
• DefaultSet by the preset

Flow

Bends the edges between colors into organic curves.

• Range0 to 0.50
• DefaultSet by the preset

Color field

How color spreads: around each point, in broad sweeps, or in curved bands.

• RangePool, Sweep, Contour
• DefaultSet by the preset

Direction, Curvature, Reach

With Sweep or Contour, the angle of the sweep, how much it bends and how far each color stretches along it.

• Range0° to 360°, 0% to 100%, 0% to 100%

Surface

A physical texture. Texture, Texture scale (1× to 6×) and Texture angle fine-tune it.

• RangeSmooth, Paper, Brushed
• DefaultSet by the preset

Film grain

Fine grain over the gradient. Grain size (1 to 6 px) and Grain blend change how it looks.

• Range0% to 100%
• DefaultSet by the preset

Softness

Blurs the whole gradient.

• Range0 to 200
• DefaultSet by the preset

Relief

Gives the surface gentle depth. Light, Sheen and Light direction set how light falls on it.

• Range0% to 100%
• DefaultSet by the preset

Diffusion, Halation

A soft glow, and a warm red-orange glow around bright areas. Light spread sets how far they reach.

• Range0% to 100%

Color separation

Faint red and blue fringes toward the edges, like a camera lens.

• Range0% to 100%

Contrast, Brightness, Hue, Vibrance

Tone controls for the whole image. Brightness 1 means unchanged.

• Range-50 to +50, 0 to 2, -180° to 180°, 0 to 1

Edge shade

Darkens the edges. Clear area sets how much of the middle stays untouched.

• Range0% to 100%
• DefaultSet by the preset

Print texture

A printed look with stepped tones. Tonal steps (2 to 32) and Print scale (1 to 16 px) set it.

• DefaultSet by the preset

Drift

How far the colors move in the animation. 0 is still.

• Range0 to 1
• DefaultSet by the preset

Speed

How fast the preview plays. It does not change the video.

• Range0.1× to 4×
• Default1×

Loop duration

The length of the video and of one seamless loop.

• Range2 to 15 s
• Default8 s

Frame rate

Frames per second in the video.

• Range24 fps, 30 fps
• Default30 fps

Canvas size

The width and height. Ratio buttons set the shape quickly.

• Range16 to 8192 px per side
• Default2000 × 1400

Scale

Multiplies the canvas size for the exported file.

• Range0.5×, 1×, 2×
• Default1×

How to get the best results

• Start from a preset close to your mood. Light studies and Satin suit bright, clean designs. Pigment feels warm and printed. After dark suits dark interfaces and title cards.
• Swap colors before you move them. Changing a preset’s colors to your own keeps its balanced layout. Then nudge positions with Adjust position.
• Leave room for text. Drag the busiest colors toward the edges so the middle stays calm for a headline or a logo.
• Export at the size you need. Set the exact size for where it goes, such as 1920 × 1080 for slides or 1080 × 1920 for stories, or use 2× for very sharp wallpapers.
• Raise Grain size for large exports. Grain is drawn per pixel, so it looks finer on a big export than in the preview.
• Keep videos short and gentle. A low Drift with a Loop duration of 8 to 12 seconds makes a calm background that loops without anyone noticing.

Why a result disappoints

• Export failed when I exported again. The file name comes from the preset or variation, so the same look exported twice gets the same name, and Gradients never replaces a file. Choose another folder, rename or move the earlier file, or click New variation first.
• The video does not move. Drift is at 0. Open Motion and raise Drift.
• The video is slower than the preview. Speed only changes the preview. Make the Loop duration shorter for faster motion.
• The PNG shows a different moment than I expected. PNG saves the preview as it is right now. Click Play, then Pause on the moment you like before you export.
• The grain is hard to see in the file. Grain looks finer on a large export. Raise Grain size or Film grain.
• An MP4 is 1 pixel smaller than I set. MP4 needs even numbers for width and height, so an odd size loses one pixel. Use even numbers.
• The preview says it couldn’t render the gradient. Click Try again. If it keeps happening, quit and reopen Hangar.
• My settings are gone. Settings last while Hangar is open. They reset after you quit.

Limits

• Gradients makes mesh gradients only. For waves, silk, noise and other animated patterns, use Shaders.
• 2 to 10 colors per gradient.
• Canvas size is 16 to 8192 pixels per side, times 0.5, 1 or 2 for the export. Very large exports may be reduced to fit your computer’s graphics.
• Images are PNG. Videos are MP4 or WebM, 2 to 15 seconds long, at 24 or 30 fps, with no sound. Add music with Add Audio.
• No transparent background.
• Your brand kit is not used. Set brand colors by hand.
• Settings are not saved after you quit Hangar.
• Gradients cannot be added as a step in a chain.
• Everything runs on your computer. Nothing is uploaded.