Browse visual thumbnails and apply gradients to any target: Colorama, Color Shift, Shape Layers, Layer Styles and NEW in version 1.4: proGradient

Select from 500+ curated built-in gradients, or import from .GRD (Photoshop), .CSS & .SVG files to access thousands of free gradients online and to easily keep your motion graphics pixel-perfect to your client’s brand.

Save your own gradients too, and organise them into categories and subcategories with auto-generated thumbnails. Regardless of how a gradient preset was created - whether saved from Colorama, Color Shift, proGradient, a Shape Layer, a Layer Style or an imported format - it can be applied to any target.

Free upgrade for all Colorama Browser owners.

.

.

.

.

.

.

.

.

.

.

.

In Colorama, Color Shift and proGradient modes, there are two radio buttons that control what happens when you already have a Colorama, Color Shift or proGradient effect on your layer. If you don't want to add multiple of the selected effect type on the layer, leave it set to Apply to existing. That way you can quickly try out lots of presets from the panel without ending up with a stack of effects. Only the gradient will be updated, and any other parameters that you may have adjusted will be left untouched. But if you want to add two or more effects of the same type to the layer, then switch it to Add new unless selected, which will cause it to add a new instance of the effect, unless you specifically select the effect first that you want to apply the gradient to.

If you're applying a preset to an existing Colorama, Color Shift or proGradient effect, it will only change the gradient. So if you've adjusted other settings, then all of that will be preserved, and just the gradient will be changed.

Note: When applying a preset to an existing proGradient effect that uses HCL color space with a non-Shortest hue interpolation mode, the rendered result may differ from the GradientHub thumbnail. In this case, manually change Gradient Color Space to OkLAB or RGB.

Fills/Strokes checkboxes:
The Fills/Strokes filters narrow which types are affected. This is useful when you have made a wider selection, such as selecting a whole shape group or the whole layer. Note however that if just one specific Gradient Fill or Gradient Stroke (or a parameter thereof) is selected, the filters will be ignored and the preset will be applied to the selected Gradient Fill or Gradient Stroke only.

Apply to selected mode:
Existing Gradient Fills and Gradient Strokes are updated.
If a shape has multiple Gradient Fills or Gradient Strokes, the topmost one per shape is updated.
If a shape has no gradient but has visible solid fills or strokes, the solids are hidden and a new gradient is added, spanning the shape's bounding box. Solid stroke width is inherited.
Shapes that have no existing Gradient Fills or Gradient Strokes, and whose solid Fills or solid Strokes are all hidden are skipped - no gradient is added.

Add new gradient mode:
A new Gradient Fill or Gradient Stroke group is added directly to the Shape Layer Contents. It may need to be manually dragged into a shape group to be visible. This mode is more for advanced users - it's a flexible option if you like working directly with your shape layer structure.

Note: Shape Layer application only works on one layer at a time.

After Effects has three layer styles that support gradients: Gradient Overlay, Outer Glow and Inner Glow. Choose one of these options, select your layer and apply the preset to get your desired layer style. If a layer style of that type already exists on the layer, the gradient colors will be replaced while other parameters are untouched.

Gradient Overlays are probably the most common use, but do try out some gradients on your Inner and Outer Glows - the results on text and other layers can be really striking.

.

After Effects does not expose gradient parameters to scripting. Therefore, in order to apply a gradient, GradientHub creates a temporary .ffx file in your User Presets/GradientHub folder. These temp files have names beginning with _cbb_tmp_, _cbb_sl_ or _cbb_ls_, and are ignored by the User Presets section when loading or reloading. Every time you apply a preset, any temp files older than 10 seconds are automatically deleted. Additionally, whenever the panel launches, either on AE startup or by opening it from Window > Extensions > GradientHub, any remaining temp files are cleaned up. It is also safe to manually delete temp files from the User Presets/GradientHub folder at any time.

.

The User Presets section lets you save your own gradient presets as standard .ffx files in a subfolder of your After Effects User Presets folder. Additionally other gradient formats are supported by placing them into the same folder, to give you a vast range of gradient options.

Apply as any effect type:
Regardless of how a preset was created - whether saved from Colorama, Color Shift, proGradient, a Shape Layer gradient, or a Layer Style, or imported from a .css, svg, or .grd file - it can be applied as any of the five target options. Just select your target using the toggle in the panel before applying.

Automatic thumbnail generation:
GradientHub automatically generates a thumbnail for each user preset by reading the gradient directly from the file, so no separate thumbnail image is required - though you can supply one if you prefer - see the custom thumbnails section below.

.

.

Click on GradientHub's + Save Preset button in the User Presets tab. GradientHub will show you the exact folder path to navigate to, then open After Effects' Save Animation Preset dialog.

Navigate to the GradientHub subfolder. (GradientHub creates this folder automatically the first time you apply or save a preset.) Give your preset a name and click Save.

Note: If the dialog opens in a different folder - perhaps because you've been saving presets elsewhere during this session - navigate to the path shown here. Alternatively, save your project and restart After Effects. Save Animation Preset will then return to the default location.

MAC OS
/Users/[Username]/Documents/Adobe/After Effects [Version]/ User Presets/GradientHub

WINDOWS
C:\Users\[Username]\Documents\Adobe\After Effects [Version]\ User Presets\GradientHub

.

In addition to .ffx files, the panel can read gradients directly from .grd (Photoshop), .css and .svg files. There are many websites where you can download 100's or even 1000's of free gradients, then load them into GradientHub. Each gradient in an imported file appears as its own preset in a collapsible subcategory named after the file. Thumbnails are generated automatically - no image file is needed.

If a client's brand uses gradient colours on their website or in an .svg logo, you can import those gradients directly into GradientHub with a single drag and drop, then click the Reload button - no colour picking, no manual stop entry. The exact gradient as defined by the designer can be applied immediately to your Colorama, Color Shift, Shape Layer, or Layer Style, keeping your motion graphics pixel-perfect to the brand.

.

Photoshop gradient libraries are loaded directly - each named gradient in the file becomes a separate preset. Colours stored in HSB or RGB mode are supported. Gradients using CMYK or Lab colour modes will have those stops skipped; if fewer than two valid stops remain the gradient is omitted entirely.

The Resource Boy website (not affliated with GradientHub) is a good place to source free .grd files.

.

.

Once saved, click Reload in the User Presets section to see your new preset appear in the panel. GradientHub will read a single gradient from each .ffx file, or multiple gradients from .css, .svg or .grd files, and display thumbnails automatically.

Gradient loading and thumbnail creation is generally fast, however it can take a little longer to read the gradients from .svg files due to the complexity of that format. Very large numbers of user presets could also slow the panel down.

You can organise your presets into subfolders inside the GradientHub folder. Each subfolder appears as a collapsible subcategory in the panel.
For example, a preset saved at:
GradientHub/Fish/clownfish.ffx

will appear under a Fish subcategory.
Up to two levels of nesting are supported — for example:
GradientHub/Fish/Tropical/clownfish.ffx

Anything nested deeper than two levels will be ignored.

.

GradientHub automatically generates a gradient thumbnail for every user preset. If you'd prefer a custom thumbnail, save a .png or .jpg file with the same base name as the .ffx file in the same folder. For example:
GradientHub/MyPreset.ffx
GradientHub/MyPreset.png

When a matching image is found, it takes priority over the auto-generated thumbnail. PNG takes priority over JPG if both exist. Recommended size is 128×128 px at a 1:1 aspect ratio.

.

FFX files are version-specific. A preset saved in a newer version of After Effects cannot be opened in an older version. If you upgrade After Effects, copy your GradientHub folder into the new version's User Presets folder - presets saved in the older version of AE will still work normally in the new version.

Only the gradient is read from the .ffx file. Any other Colorama, Color Shift, Shape Layer, Layer Style or proGradient parameters, keyframes, or expressions saved in the file will be ignored by GradientHub. To apply the full saved .ffx including other parameters, use Animation > Apply Animation Preset instead.

If a preset file contains multiple Colorama, Color Shift or proGradient effects, only the last effect in the file will be used. For Shape Layer presets, if the saved .ffx contains multiple gradient fills or strokes, only the first gradient found will be used. For best results, select a specific Gradient Fill or Gradient Stroke before saving.

User presets with a very large number of colour stops (65 or more) cannot be applied to Colorama and will produce an error. Application to Shape Layers and Layer Styles may be slow with very large stop counts. Color Shift supports up to 100 color stops, and if a user preset contains more than 100 stops, only the first 100 will be applied to Color Shift. In practice, gradients imported from .grd, .css, or .svg files rarely exceed these limits.

.