Close Menu

Gradient Background

A smooth transition between two colors from your palette.

Choosing the Colors

Gradient backgrounds consist of two colors which you can choose from the block sidebar. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer. The end color has an additional X option for no color. This is useful for nested backgrounds, where you’d like the parent background to bleed through.

Make sure to toggle the Reverse Print switch if you are using dark background colors.

Gradient Direction

Controls the direction you’d like the gradient to go, from Start color to End Color. For example, with the lower right arrow selected, the End color will be predominantly in the lower right corner of the background.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

In this way, nested backgrounds with one layer being a fixed background can yield interested results. Try it out!