Topic: Custom Gradient Overlay for Legacy Page Hero

hillhero
January 19, 2026 at 1:24 am

Hi GeneratePress Support Team,

I have another question for you. I’m currently working on replacing the wonderful “Dispatch” design (since it’s no longer being developed) and trying to replicate its look as closely as possible.

Today’s question is about my single post pages:

I have a Page Hero set up via Design>Elements>Single Post, where the featured image is displayed across the container. The problem is that with bright images, the post title and date become unreadable.

While there is a “Background Overlay” option in the Page Hero settings, it applies to the entire image, which doesn’t look very nice. I would prefer a gradient overlay that only darkens the bottom third of the image.

If I were using the GenerateBlocks editor, I would know how to do this, but I don’t have those block options here. I assume CSS is the way to go, but I’m not an expert in that area.

Could you please help me out and explain the solution in a “beginner-friendly” way?

Example page: https://xn--hgelhelden-9db.de/selbst-alles-auf-null-wuerde-nicht-reichen/

Thank you so much for your help!

Stephan

Alvind

January 19, 2026 at 4:52 am

Hi Stephan,

Could you try adding this CSS:

.page-hero.overlay {
    position: relative;
}

.page-hero.overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
    display: block;
    visibility: visible;
    font-size: initial;
    line-height: initial;
    overflow: visible;
}

.inside-page-hero {
    position: relative;
    z-index: 1;
}

hillhero
January 19, 2026 at 5:14 am

Hi Alvind,

wow, excellent. That worked!

Thanks a lot!

Stephan
Alvind
January 19, 2026 at 6:25 am

No problem, glad to hear that!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Custom Gradient Overlay for Legacy Page Hero