In a colorful mood and looking to add a bold splash (pun intended) of color that provides depth to your designs?

Let us reintroduce you to a trend from the '90s that's back again to do just that – make a statement. Whether you're looking to taste the rainbow or add a subtle flare, incorporating gradients can add a unique twist to your color palette.

Adding custom CSS to your page is available with Designer Pro editing mode, offered with Splash for Business.

We recommend using ColorZilla's coding tool to generate your custom gradient CSS. ColorZilla allows you to choose your custom colors as well as gradient orientation to create your own pop of color.

Generating the Gradient

1. Head to ColorZilla to get started. Choose from the color presets or double click the color swatches to create a custom color.

Note: Drag a color swatch vertically, away from the slider to remove it. To add another color swatch, hover near the slider until the pointer arrow turners into a small hand with a + and click once.

2. Select the Orientation of the gradient.

3. Hover over the code and click the Copy button that appears in the bottom right corner.

Applying the Gradient 

1. Head to your Splash page to paste the code into the Main CSS tab within Splash Dev Tools, shown below.

2. Assign a class name to the code you've just pasted. For example, .button-gradient – then include your opening and closing brackets { }. (This class name will later be added into the Custom Classes field within the Properties tab, shown in step 6.)

3. Copy the class name without including the period (.).

Note: The period must be included in front of the class name in the Main CSS, but is not needed once we paste the class name into the Custom Classes field within the Properties tab.

4. Click Save and return to your main Layout tab.

5. Open the element and then click into the Properties tab.

Note: Gradients are most commonly applied to Button, Square, Line or Color Mask elements.

6. Paste the class name into the Custom Classes field.

Note: If any classes already exist, be sure to add a single space in between.

7. Save and refresh your page to see the new gradient has been applied.