Set Duotone Filters

The Duotone filter in WordPress seamlessly blends two distinct colors to create a striking filter effect, which can be elegantly applied to both images and video backgrounds for a captivating aesthetic.

Duotone filters can be set using two different methods: via theme.json (Code) and through the Post/Page Editor (No-code).

Setting Duotone Filter (CODE)

Inside the theme.json file inside of the Frost theme, look for the code below. Change the values for name, slug, and colors as desired.

{
	"settings": {
		"color": {
			"duotone": [
				{
					"name": "Black and White",
					"slug": "black-and-white",
					"colors": [ "#000000", "#ffffff" ]
				},
				{
					"name": "Primary and White",
					"slug": "primary-and-white",
					"colors": [ "#0000ff", "#ffffff" ]
				},
				{
					"name": "Secondary and White",
					"slug": "secondary-and-white",
					"colors": [ "#000099", "#ffffff" ]
				}
			]
		}
	}
}

Setting Duotone Filter (NO-CODE)

Additionally, duotone filters can be applied to an image or a video background on an individual basis. This user-friendly process will help you achieve an eye-catching and impactful visual result.

To begin, select an appropriate image or video and follow these steps:

1. Access the block toolbar.
2. Click on the filter button.
3. Browse through the available presets and make a selection.