Color and Gradient Background and Overlays

This feature can be used on all backgrounds AND as image and jumbotron video overlays.

To use these options:

• Go to the the Page Background tab for full page settings, Background tab for jumbotron row settings, or Options tab for specific row settings.
• In the Background dropdown select Custom
• The ‘Palette Color’ and ‘Gradient’ fields will display

Color Background or Overlay:

1. Choose a color from the Palette Color options
   1. Need more colors? Add them under Appearance > Look & Feel > Colors Tab
2. Choose the opacity under Background Color Opacity
   1. 0% is fully transparent, 100% is fully opaque.
3. If you are adding this overlay over a background image, checkmark the box “Use the Palette Color or Gradient as the overlay” under the Background Image Options

Gradient Background or Overlay:

1. Under ‘Gradient’, choose a preset gradient
   1. Need more gradient options? Create more in the global settings: Appearance > Look & Feel > Gradients. See below for a guide to create gradients
2. If you are adding this overlay over a background image, checkmark the box “Use the Palette Color or Gradient as the overlay” under the Background Image Options

Guide to Creating Gradients

Setting Gradients Globally

Any number of gradients can be set globally on the Gradients tab of the Look & Feel page, then be used repeatedly for backgrounds and overlays throughout the rest of a website.

To create a gradient go to Appearance > Look & Feel > Gradients

Gradient Settings:

1. Gradient Name – This is the name you will see when selecting the gradient to be used for a background.
2. Options:
   1. ‘Use a radial gradient instead of a linear gradient’ – by default the gradient will be linear. Select this option to use a radial gradient.
3. Gradient Angle – This option will be hidden if the radial option above is selected.
   1. 0º is bottom to top, and increasing the degree rotates clockwise
   2. If no direction is specified, the default transition is bottom to top.
4. First Palette Color & First Color Opacity – Set the color used at one end of the gradient.
5. Second Palette Color & Second Color Opacity – Set the color used at the other end of the gradient.
6. First Color Stop & Second Color Stop – Choose a number between 0 and 100 to define how much space the color should take up before fading.

Note:

1. If either the first or second palette color is left unselected, the gradient will use a fully transparent color.
2. You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly. Use the First and/or Second Color Gradient Color Stop to accomplish this by making them add up to 100 exactly.

Example of a Linear Gradient:

Example of a Radial Gradient:

Angle Origin Guide:

This should help visualize where the first palette color will originate from.

Gradient Tool

Use this CSS Gradient Tool to help understand what gradient look you want. Note: Our gradients only use up to two colors, so please modify this tool, to only use two colors.