# Add Brand Gradients to the Editor

> Adds your brand gradients to the gradient picker for Group, Cover, Button and other blocks, so editors use on-brand backgrounds.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, gradients, colors
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-brand-gradients/

## Code

```php
// Gradients: slug => [name, CSS gradient].
$wpide_gradients = array(
    'wpide-sunrise' => array( 'Sunrise', 'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)' ),
    'wpide-ocean'   => array( 'Ocean', 'linear-gradient(135deg, #0ea5e9 0%, #1e3a8a 100%)' ),
    'wpide-mist'    => array( 'Mist', 'linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)' ),
);

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_gradients ) {
    $data    = $theme_json->get_data();
    $current = isset( $data['settings']['color']['gradients'] ) ? (array) $data['settings']['color']['gradients'] : array();
    $current = isset( $current['theme'] ) ? (array) $current['theme'] : $current;
    $by_slug = array();

    foreach ( $current as $preset ) {
        if ( isset( $preset['slug'] ) ) {
            $by_slug[ $preset['slug'] ] = $preset;
        }
    }

    foreach ( $wpide_gradients as $slug => $gradient ) {
        $by_slug[ $slug ] = array( 'slug' => $slug, 'name' => $gradient[0], 'gradient' => $gradient[1] );
    }

    return $theme_json->update_with( array(
        'version'  => WP_Theme_JSON::LATEST_SCHEMA,
        'settings' => array( 'color' => array( 'gradients' => array_values( $by_slug ) ) ),
    ) );
} );
```

## Notes

Any valid CSS gradient works. Existing theme gradients are kept.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Brand Gradients to the Editor" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/