WP Snippet #011 Custom Gutenberg gradient colors.
Tags: wordpress, webdev, php
Published: 2020-04-01 18:48:37

---
title: WP Snippet #011 Custom Gutenberg gradient colors.
published: true
description: A tutorial on how to use the gradient api in your WordPress themes and set custom gradient colors in the Gutenberg editor.
canonical_url: https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/
cover_image: https://since1979.dev/wp-content/uploads/2020/03/wordpress-snippet-011-custom-gutenberg-gradient-colors.jpg
tags: wordpress, webdev, php
---
[Originally posted on my website on April 1th 2020](https://since1979.dev/snippet-011-custom-gutenberg-gradient-colors/)

### How to set custom gradient colors in Gutenberg.

As of WordPress 5.4 gradient colors in Gutenberg are no longer marked as experimental. Meaning we can start using them in our production sites. Now the default gradients are very creative but a bit loud. So we might want to set some custom gradients so our clients don't turn our carefully designed websites in to a complete carnival.

![](https://since1979.dev/wp-content/uploads/2020/03/default-vs-custom-gutenberg-gradients.jpg)

To remove the default gradient's and set some custom colors we can use the code snippet below.

{% gist https://gist.github.com/vanaf1979/42fb1608e37b3faefd2b29c07807ac23 %}

With the code above we add an action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *theme_custom_gradients*.

Inside out new *theme_custom_gradients* function we use the *[add_theme_support](https://developer.wordpress.org/reference/functions/add_theme_support/)* function to enable the *editor-gradient-presets* theme support. As the second argument we pass an array containing arrays defining our custom gradient colors.

Each sub-array contains three key/value pairs. namely:

-   **$name**: The name we want to display inside the editor. Note that we use the *[__()](https://developer.wordpress.org/reference/functions/__/)* function to make these names translatable.
-   **$gradient**: The actual gradient. Check out [Css linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) to learn more.
-   **$slug**: A unique slug that we can use in our Css to set the actual gradient.

### Use our custom gradients in our Css

To actually make the gradients work inside of our theme we have to add a bit of Css for each gradient like shown below:

{% gist https://gist.github.com/vanaf1979/f9f00ee22cac7e8f576d3fb224feefaf %}

### Disable Gutenberg gradient colors

In some cases we might want to disable the use of gradients all together. In those cases we can use the code snippet below.

{% gist https://gist.github.com/vanaf1979/12a2622908fb551ae80f41b8e42d60d5 %}

With the code above we add a action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *disable_editor_gradients*.

Inside the *disable_editor_gradients* function we use the *add_theme_support* function to add support for *disable-custom-gradients* (A bit counter intuitive, but it is what it is). Then we also set an empty array for the *editor-gradient-presets* theme support to remove the default gradients.

#### Follow

Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading and stay safe**