# Separator Block Styles: Gradient and Ornament

> Adds a fading gradient line and a centered ornament (✦) style to the Separator block, for more elegant breaks between sections.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, separator, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-styles-separators/

## Code

```php
add_action( 'init', function () {
    register_block_style( 'core/separator', array(
        'name'         => 'wpide-gradient',
        'label'        => 'Gradient',
        'inline_style' => '.wp-block-separator.is-style-wpide-gradient{border:0;height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.5;}',
    ) );

    register_block_style( 'core/separator', array(
        'name'         => 'wpide-ornament',
        'label'        => 'Ornament',
        'inline_style' => '.wp-block-separator.is-style-wpide-ornament{border:0;height:auto;background:none!important;text-align:center;overflow:visible;opacity:.6;}.wp-block-separator.is-style-wpide-ornament::before{content:"\2726  \2726  \2726";letter-spacing:.5em;font-size:1rem;}',
    ) );
} );
```

## Notes

Change the ornament character in the CSS content value.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Separator Block Styles: Gradient and Ornament" 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/