Hero slide gradients can behave unpredictably when a WordPress theme uses slide-specific CSS overrides instead of the page builder’s own overlay settings. In this case, a legacy stylesheet targeted individual slide positions, so adding or reordering slides caused the wrong image to receive the gradient. The long-term fix removed those slide-specific rules, used Beaver Builder’s built-in overlay controls, and applied a mask effect to create the desired feathered gradient without editing the stylesheet every time the carousel changed.
Issue background
A WordPress homepage used a Beaver Builder hero carousel with several image slides. One slide needed a dark gradient overlay so its text remained readable, while another slide needed no overlay at all.
The WordPress backend appeared to show the desired settings, but the frontend behaved differently:
- A slide that should have had no gradient still displayed one.
- A different slide that should have retained the gradient lost it.
- Adding or reordering slides changed which image received the custom treatment.
The mismatch initially looked like aggressive caching, but further review showed that older custom styles were controlling the overlay based on slide position.
Diagnosis
The active theme contained legacy CSS written for a specific earlier carousel arrangement.
Instead of allowing each Beaver Builder slide to control its own overlay, the stylesheet targeted a particular slide index. When a new slide was inserted, the original first or second slide moved to a different position, but the CSS selector still targeted the old index.
This created a fragile dependency between content order and visual styling. Every time editors changed the carousel, a developer had to update the stylesheet again.
Beaver Builder already provided a solid overlay color and opacity setting for each slide. Although it did not provide the exact feathered gradient effect by itself, a CSS mask could transform the solid overlay into the desired gradient while keeping the overlay color and opacity editable inside Beaver Builder.
The mobile review uncovered a second issue. Desktop hero images were designed to crop at the sides, while mobile images were configured to scale rather than crop. Text embedded directly into an image could therefore disappear or become unreadable at narrower widths. The cleaner content approach was to use an image without baked-in text and place the slide title in editable HTML text.
Resolution steps
- Compare backend and frontend behavior. Confirm which slide should have a gradient and which should not.
- Clear caches before deeper changes. Purge WordPress, hosting, CDN, Beaver Builder, and browser caches so older CSS does not mask the current state.
- Inspect the active stylesheet. Search for selectors tied to carousel positions such as the first, second, or nth slide.
- Identify slide-specific overrides. Confirm whether the overlay is being disabled or altered according to position rather than per-slide settings.
- Remove the positional dependency. Strip out legacy rules that require stylesheet edits whenever slides are added or reordered.
- Use Beaver Builder’s overlay controls. Set the overlay color and opacity directly on each slide. For example, a dark overlay can use approximately 70% opacity, while a slide requiring no overlay can use 0%.
- Apply a mask to feather the overlay. Use a reusable CSS mask on the overlay layer so Beaver Builder’s solid color fades gradually across the image.
- Test on staging first. Compare the new approach against the production carousel before deployment.
- Verify every slide independently. Reorder slides and add a temporary test slide to confirm that each slide retains its own intended overlay behavior.
- Review mobile text contrast. A slide with no overlay may need a different text color at mobile widths.
- Avoid embedding important text in images. Add headings and calls to action as real HTML text so they remain readable, responsive, searchable, and accessible.
- Use mobile-friendly source images. Choose compositions that tolerate side cropping or scaling without losing the subject.
- Test image behavior at multiple breakpoints. Review desktop, tablet, and narrow mobile widths, especially when the image focal point sits near an edge.
- Deploy and clear caches again. After approval, move the changes to production and purge every cache layer.
- Document the editor workflow. Explain that future overlay changes should be made through each slide’s Beaver Builder overlay opacity rather than through custom slide-index CSS.
A simplified mask approach might look like this:
.hero-slide .fl-slide-bg-overlay {
-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.75) 45%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.75) 45%,
rgba(0, 0, 0, 0) 100%
);
}The exact selector and gradient direction should match the site’s rendered Beaver Builder markup and text placement.
Final outcome
The slide-specific stylesheet overrides were removed and replaced with a reusable mask-based overlay treatment.
Editors could then control each slide through Beaver Builder’s existing overlay color and opacity settings. One slide used a dark overlay with partial opacity, while another used 0% opacity to behave as if no overlay existed.
The updated approach was tested on staging, approved, and deployed to production.
A follow-up mobile issue was resolved by changing the mobile text color and by replacing an image that contained baked-in text with a plain image plus editable slide text.
The key lesson is that carousel styling should follow the slide’s content settings rather than its numeric position. Position-based CSS breaks as soon as editors reorder or add slides, while builder-managed overlays provide a more maintainable workflow.
For help troubleshooting Beaver Builder hero sliders, responsive image cropping, or WordPress overlay and caching issues, contact Freshy.
