---
title: Adding gradients to your WordPress theme
description: 'WordPress block editor now supports custom gradient presets, allowing for more meaningful design using your theme’s color palette. Here’s how to implement it.'
doc_version: current
last_updated: '2026-04-01T11:34:19.000Z'
date: '2020-07-27T20:00:00.000Z'
author: Rich Tabor
summary: 'WordPress block editor now supports custom gradient presets, allowing for more meaningful design using your theme’s color palette. Here’s how to implement it.'
tags:
  - Blocks
  - Design
  - WordPress
published: true
type: blog
url: /block-editor-gradients
canonical: https://richtabor.com/block-editor-gradients
id: 1100
---

Love ‘em or hate ‘em, gradients are here to stay. Especially now, as the WordPress block editor has a default mechanism to apply gradient styles throughout the editing experience.

Out of the box, I don’t find the default gradient application experience particularly meaningful, as these presets are an assortment of trendy gradient styles presets. But with some finesse, block editor gradients could be much more purposeful by using the editor’s color palette instead.

Let’s dive in and explore how it’s done.

## Adding gradient presets

Adding gradient presets to the WordPress block editor is strikingly familiar to how themes provide a custom color palette. Using the `add_theme_support( 'editor-gradient-presets' )` function, you may add as many gradients as you’d like.

![The default implementation of gradients](https://i0.wp.com/rich.blog/wp-content/uploads/2023/01/bd58c-gradients-core.jpg?ssl=1&resize=1928%2C1388)

_The default implementation of gradients_

Each gradient is provided as an array, with a `name`, `gradient`, and `slug`. The `name` is the label of the gradient, `gradient` is the actual [CSS gradient value](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient), and `slug` will become the class associated with the gradient. Here’s an example of registering a standalone gradient preset:

```
add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'     => __( 'Primary to Secondary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, rgba(255,0,0,.8) 0%, rgba(255,0,0,0) 100%)',
			'slug'     => 'primary-to-secondary',
		),
	)
);
```

Simple. Though I do think there’s an easy enough method to making the gradient presets much more meaningful to the person actually designing the website.

## Using existing color palette colors in gradients

In an effort to make the gradient presets much more relevant, I explored how to map the colors provided by a theme’s `add_theme_support( 'editor-color-palette' )` function, to the actual gradient presets. So here’s what I came up with:

### 1\. Add an array of colors

To keep ourselves from repeating code (in this case, color values), we will want to build a single array of colors to pull those HEX values into both `editor-color-palette` and `editor-gradient-presets`.

```
$colors = array(
	'primary'   => '#db1c7d',
	'secondary' => '#a528f0',
	'tertiary'  => '#90cbff',
);
```

### 2\. Register an editor color palette with the array

Now that we have our colors specified in the $colors array, we need to register those using the `add_theme_support( 'editor-color-palette' )` function.

```
// Block Editor Palette.
$editor_color_palette = array(
	array(
		'name'  => __( 'Primary Color', 'tabor' ),
		'slug'  => 'primary',
		'color' => $colors[ 'primary' ],
	),
	array(
		'name'  => __( 'Secondary', 'tabor' ),
		'slug'  => 'secondary',
		'color' => $colors[ 'secondary' ],
	),
	array(
		'name'  => __( 'Tertiary', 'tabor' ),
		'slug'  => 'tertiary',
		'color' => $colors[ 'tertiary' ],
	),
);
add_theme_support( 'editor-color-palette', $editor_color_palette );
```

### 3\. Convert HEX colors to RGB(A)

If you’re familiar with CSS gradients, they require the color values in RGB(A) format. That saying, we need to take our HEX values from the $colors array and provide a function to convert them to RGB(A).

```
/**
 * Convert a 3 or 6-digit hexadecimal color to an associative RGB array.
 *
 * @param string $color The color in hex format.
 * @param bool   $opacity Whether to return the RGB color is opaque.
 *
 * @return string
 */
function hex_to_rgb( $color, $opacity = false ) {

	if ( empty( $color ) ) {
		return false;
	}

	if ( '#' === $color[0] ) {
		$color = substr( $color, 1 );
	}

	if ( 6 === strlen( $color ) ) {
		$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
	} elseif ( 3 === strlen( $color ) ) {
		$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
	} else {
		$default                 = \Go\Core\get_default_color_scheme();
		$avaliable_color_schemes = get_available_color_schemes();
		if ( isset( $avaliable_color_schemes[ $default ] ) && isset( $avaliable_color_schemes[ $default ]['primary'] ) ) {
			$default = $avaliable_color_schemes[ $default ]['primary'];
		}
		return $default;
	}

	$rgb = array_map( 'hexdec', $hex );

	if ( $opacity ) {
		if ( abs( $opacity ) > 1 ) {
			$opacity = 1.0;
		}

		$output = 'rgba(' . implode( ',', $rgb ) . ',' . $opacity . ')';

	} else {

		$output = 'rgb(' . implode( ',', $rgb ) . ')';

	}

	return esc_attr( $output );

}
```

### 4\. Register gradient presets

Finally, we’re ready to register our gradients using the `add_theme_support( 'editor-gradient-presets' )` function. Referencing the `$colors` array and using the `hex_to_rgb()` function, we can now deploy our theme’s color palette to the gradient presets. In the following example, I’ve declared a few variants for gradient presets:

-   Primary to Secondary
-   Primary to Tertiary
-   Secondary to Tertiary
-   Tertiary to Primary

```
add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'     => __( 'Primary to Secondary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'secondary' ] ) . ' 100%)',
			'slug'     => 'primary-to-secondary',
		),
		array(
			'name'     => __( 'Primary to Tertiary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'primary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
			'slug'     => 'primary-to-tertiary',
		),
		array(
			'name'     => __( 'Secondary to Tertiary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'secondary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'tertiary' ] ) . ' 100%)',
			'slug'     => 'secondary-to-tertiary',
		),
		array(
			'name'     => __( 'Tertiary to Primary', 'tabor' ),
			'gradient' => 'linear-gradient(135deg, ' . esc_attr( hex_to_rgb( $colors[ 'tertiary' ] ) ) . ' 0%, ' . hex_to_rgb( $colors[ 'primary' ] ) . ' 100%)',
			'slug'     => 'tertiary-to-primary',
		),
	)
);
```

## A better gradient experience

After applying the steps above, the WordPress themes’s color palette and gradient presets will match each other — affording a better experience applying gradients throughout the editor. Instead of those flashy gradient styles, the end user will have a selection of relevant — on brand — gradients to apply.

![Better gradients, derived from the colors within the editor color palette](https://i0.wp.com/rich.blog/wp-content/uploads/2023/01/c3c5f-gradients.gif?resize=2032%2C1378&ssl=1)

_Better gradients, derived from the colors within the editor color palette_

If you’ll find it helpful, you can check out the [full source code here](https://gist.github.com/richtabor/f4ed19679d3d3c1734d94df790e9c42a#file-add-colors-and-gradients-to-gutenberg-php), with all the steps combined. As a side-note, allowing users to choose the colors that display within the block editor is an even better user-experience.

I do recommend looking into [how to leverage the Customizer to allow users to pick their own colors](/gutenberg-customizer-colors/) — which we’ve implemented in the [Go WordPress theme](https://github.com/godaddy-wordpress/go/tree/master).

So what do you think?

Will you be updating your WordPress themes to better support gradient presets in Gutenberg?

## Sitemap

[Full site index](/sitemap.md)