These options sit in the color picker and in a section's, column's or inner column's Design > Style. A background is the same on every screen size. For the color picker itself (theme colors, Recent, Saved, HEX, opacity), see How to use the color picker. For everything else in the Style panel (slideshows, parallax, Change color on scroll, borders, shadows, glass), see Section and column design.
How to add a gradient background
- Select a section, column or inner column and open Design > Style > Color.
- Click the Background color swatch and switch to Gradient.
- Click each stop on the bar and pick its color. Click the bar to add more stops.
- Choose a Direction, or set an exact Angle.
A gradient at any angle
In any color picker that offers Gradient:
- Click a color stop on the bar to pick its color. Its color square shows straight away.
- While a stop is picked, clicking a theme color, recent color or saved color changes just that stop. A theme color stays linked, so the stop changes when you change that theme color. On text gradients the stop takes the color but isn't linked.
- Click the bar between stops to add a stop. Drag a stop to move it. A gradient needs at least 2 stops.
- Direction picks one of the eight compass directions, or the center dot for a radial gradient.
- Angle turns a straight gradient to any angle from 0° to 359°. 0° runs upwards, 90° to the right.
- For a radial gradient, choose Circle or Ellipse (stretches to the shape of the box) and move its center with Center X and Center Y.
Gradient layers
Under Background color, Gradient layers draws extra gradients on top of the background color or gradient, for example soft radial glows over a dark straight gradient.
- Click Add layer. A soft white glow is added in the top-left.
- Click the layer's swatch to change its colors, angle, shape or center.
- Give at least one stop a see-through color (lower its opacity) so the layers and the color below show through.
- Click the × on a layer (Remove layer) to delete it.
New layers go on top. The top layer is listed first, as Layer 1. A box can have up to 6 layers; after that Add layer is grayed out and says "Up to 6 layers". A background picture sits above the layers.
Background picture size
Open the picture under Image and choose its Size: Cover (fills the box, cropping if needed), Contain (shows all of it), Auto (its own size) or Fixed. Fixed takes a Width and Height in px or %, or auto, for example 1600px × 525px, or auto × 100% for a picture as tall as the box. Auto on one side keeps the picture's shape.
Blend an overlay
With a picture set under Image, turn on Overlay. Blend sets how the overlay color mixes with the picture below. Multiply darkens and tints it, Screen lightens it, Overlay and Soft light add contrast. Normal just lays the color on top. The full list also has Darken, Lighten, Color dodge, Color burn, Hard light, Difference, Exclusion, Hue, Saturation, Color and Luminosity.
Text over a blended overlay is only made light or dark automatically when the blend can't change which it is: a dark Multiply overlay or a light Screen overlay. With other blends, set the text color yourself and check it reads.
A pattern over a background video
Under Video, find Pattern over video and click Choose picture (or paste a picture address), for example a dot or line pattern, or a texture. It's drawn over the video and under the words. Choose its Size, Repeat (Tile, Once, Across or Down) and Opacity. Remove takes it off. More on background videos: How to use a client's video on a site.
Gradient text and text shadow
- In a Text widget: select words and open the text color picker. Switch to Gradient for gradient letters. The Text shadow menu in the toolbar adds a shadow (Soft, Strong, Crisp or Light glow) or removes it (No shadow).
- In widget text styles (card titles, accordion titles, tab labels and other parts with a Text color row): switch the color to Gradient, and turn on Text shadow to set Shadow X, Shadow Y (-30 to 30 px), Shadow blur (0 to 60 px) and Shadow color.
In widget text styles, gradient letters keep the gradient's first color as their main color, so readability checks read that color. Pick gradient colors that all read on the background.
Examples
- A dark hero with a glow: Background color = a straight gradient from navy to black at 160°, then Add layer twice: a soft white ellipse at the top-left and a faint brand-color circle at the bottom-right.
- A tinted photo: a picture under Image, Overlay on in your Primary color at 60%, Blend set to Multiply.
- A video with texture: a background video plus Pattern over video with a small dot pattern, Tile, at 30% opacity.
- A heading that pops on a photo: select the words, choose Text shadow > Strong.
Limits and what it can't do
- Up to 6 gradient layers per section, column or inner column.
- A background (color, gradient, layers, picture, video) is one setting for every screen size. You can't give phones a different gradient.
- The Text widget toolbar's shadows are four ready-made presets; to set your own offset and blur, use a widget text style that has Text shadow.
- Gradient letters in a Text widget aren't linked to theme colors.
- The contrast check in the color picker is off over gradients, pictures and videos.
Who can use it
Agency people with the Mount Olympus tool. Client people need the Editor permission (it covers design). A connected (Business Text) Text widget doesn't get the toolbar's text shadow.
Credits
All of this is free. If you ask Zeus to do it in the editor chat ("turn the hero gradient to 120 degrees", "add a soft glow in the top corner", "multiply the overlay", "put a dot pattern over the video"), each change uses your Zeus editor allowance. See Zeus in the editor.
Imported sites
A site you import keeps its gradient angles, layered gradients, picture sizes, overlay blends, video patterns, gradient text and text shadows.
Troubleshooting
- Gradient layers don't show: every stop is fully solid, so the top layer covers everything below. Lower the opacity of at least one stop in each layer.
- "Up to 6 layers" / Add layer is grayed out: the box already has 6. Remove one first.
- The layers vanish behind a picture: a background picture sits above the layers. Remove the picture, lower its Opacity, or use a see-through PNG.
- Text is hard to read over a blended overlay: with blends other than Multiply (dark) or Screen (light), the text color isn't picked for you. Set it yourself.
- There's no Overlay option: it shows only once a picture is set under Image.
- There's no Gradient switch: that setting only takes solid colors.