# Cover Block Style: Bottom Gradient for Readable Text

> Adds a "Bottom gradient" style to the Cover block that darkens only the lower part of the image, so captions and headings at the bottom stay readable while the photo stays bright.

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

## Code

```php
add_action( 'init', function () {
    register_block_style( 'core/cover', array(
        'name'         => 'wpide-bottom-gradient',
        'label'        => 'Bottom gradient',
        'inline_style' => '.wp-block-cover.is-style-wpide-bottom-gradient::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 35%,transparent 65%);}.wp-block-cover.is-style-wpide-bottom-gradient .wp-block-cover__inner-container{position:relative;z-index:2;}',
    ) );
} );
```

## Notes

Set the Cover's overlay opacity to 0 and place the text at the bottom for the best result.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Cover Block Style: Bottom Gradient for Readable Text" 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/