Two Tone Background
Combine two colors at any angle to form a layered background effect.
Choosing the Colors
Two tone 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.
Two Tone Settings
The Direction controls the angle of the two tone background, while the Stop controls the point at which the color transition is placed. When the Stop control is at 0%, only the Start Color will be shown and vice versa: at 100%, only the End Color is shown.
These two settings are further illustrated below.
The Direction control.
The Stop control.
Mobile Settings
Flip the Enable Mobile Settings switch to bring up a separate set of Direction and Stop controls for mobile devices. This is especially important when you use one light and one dark color underneath text as to ensure that the text remains visible on all screen sizes.
Because this setting only appears on mobile devices and its most common to be editing pages on a desktop browser, you may have to do some guessing and checking to make sure this is set how you’d like.