HappyAddons introduces Foreground Overlay to give you greater creative control over your container designs. Now, you can add an image, solid color, or gradient as a foreground overlay that floats above your content, opening up new possibilities for unique visual effects.

watch demo video

We are introducing Elementor
Foreground overlay

Elementor’s native Background Overlay feature allows you to place an image or color behind your container content, but it doesn’t provide an option to position an overlay above the content.

HappyAddons introduces Foreground Overlay to give you greater creative control over your container designs. Now, you can add an image, solid color, or gradient as a foreground overlay that floats above your content, opening up new possibilities for unique visual effects.

With Foreground Overlay, you can:
Add an image overlay above your container content
Apply a solid color overlay
Create stunning gradient overlays

Unlike a traditional Background Overlay that stays behind your content, the Foreground Overlay sits above it, allowing you to create more creative, layered, and visually striking designs—all directly within Elementor.

Design 01

Gradient Color in Fullwidth

Design 02

Gradient Color in Box Width

Design

UI/UX

Web development

Branding

Digital Marketing

SEO & Optimization

Design

UI/UX

Web development

Branding

Digital Marketing

SEO & Optimization

Design 03

Multicolor Gradient

Multicolor

Design 04

Foreground Image

Happy

Design 05

Vertical Gradient

Royal

Latest widgets
and features

Stacked Card

Visual Tabs

Hover Accordion

Team Hover Grid

Image Cycle

Global Animation

Sticky Pin Elements

Marquee

Horizontal Scroll

Image Trail

Have something else
in mind?

Connect with your own

Community

Discover more in our

Documentation

Get Smart Support from

AI Assistant