Gradients

@since Cornerstone 7.7.0, and Pro 6.7.0

Hard time choosing between two colors? Why not use them both? Why not use a dozen? Cornerstone's powerful Gradient Builder is more advanced than anything else on the market and offers the perfect mix of intuitive controls and advanced flexibility. Let's begin!

Controls

First off, when you select a color supported by Gradients you'll see a choose selection of Solid or Gradient. Solid will be a singular color (how it has always been in the past) and Gradient will enter you into the Gradient Builder.

The Gradient Builder has 3 sections.

1. The Color Picker let's you control the color stops.
2. The Gradient Controls and visualizer allows you to make your selection.
3. The Palette allows you to select global colors for your Gradient.

Note: If you select a Global Gradient, it will give you a warning that the Global Gradient selected will overwrite your current Gradient.

Gradient Type

The first dropdown allows you to choose the Gradient Type. Available options include Linear, Radial, and Conic, along with their repeating versions. We'll explore the nuances of repeating Gradients further down in the From and To section.

Gradient Direction

This setting determines where your Gradient starts and the direction that it flows. Each Gradient Type has its own set of direction controls and every type includes a Custom option that lets you manually enter any direction for more granular control.

Color Stops

Just beneath the direction setting, you’ll find the Color Stops interface. Each stop appears as a capsule. Clicking a capsule makes it active, allowing you to modify its color and set the From and To positions. Use the + to add a stop and the - to remove the currently active one. A minimum of two color stops is always required to build a Gradient.

From and To

Each Color Stop includes optional From and To fields. By default, both are set to auto, which means the browser will handle positioning based on standard CSS Gradient behavior. The From and To values become especially powerful with Conic Gradients, which support degree units for precise angular control.

For example, setting From: 50% on the final color stop of a Linear Gradient shifts how much space that color occupies.

If you then switch to a Repeating Linear Gradient, you’ll see the entire pattern repeat from that 50% mark.

Specifying both From and To creates a hard edge of solid color between those positions — ideal for designs like this radial "umbrella" effect.

Visualizer

The Visualizer shows a live preview of your Gradient configuration. Note that Dynamic Content values currently won't render in the preview.

Copy and Paste

The Copy and Paste buttons make it easy to move Gradients between controls. This functionality uses a JSON representation of your Gradient settings, letting you quickly apply the same Gradient to another color field.

Global Gradients

You can store and reuse Gradients via the Color Manager. When a color input supports Gradients (most do), any Global Gradients you’ve saved will appear in the list. Clicking the pencil icon next to a Global Gradient creates a local copy you can edit — great for experimenting without changing the original.

Caveats

A few limitations to be aware of due to how CSS supports Gradients.

• SVG icons cannot use Gradient colors. The choice is still in place because you can use Gradient colors on Webfonts.
• Text and box shadow colors cannot use Gradients. This is not supported in CSS.
• Border Gradients are possible, but they won’t work with border-radius directly. To work around this, wrap your content in a div that has a Gradient background and border radius, apply padding, and place another inner div with your content inside. See this template as an example.

Advanced

Gradients internally use an Object structure to easily identify in Cornerstone and to allow for non-CSS values like Dynamic Content. Below is a sample of how Gradients are stored.

Function

The cs_gradient_from_array function can be used to turn a Cornerstone Gradient Object into the CSS value.

TSS

There are two TSS functions related to Gradients: is-gradient and build-gradient. The mixins text-color, border, and background-color will automatically use these functions to properly display your color if it's a Gradient.