Overlay Options - Creative Popup Documentation

The Overlay is the background layer that appears behind your popup. It serves to dim or blur the rest of your website, effectively focusing the visitor's attention on your message. In this tab, you can customize the appearance and behavior of this background layer.

The Overlay Options interface

Overlay Behavior & Style

Control how the overlay looks and how users interact with it to dismiss the popup.

Disable overlay

Toggle this option to hide the background layer entirely. If disabled, your popup will appear directly over your website content without any dimming effect.

Close by clicking away

When enabled, visitors can close the popup simply by clicking anywhere on the overlay (the area outside the popup). This provides a more user-friendly way to dismiss content.

Overlay color

Set the color of the background layer. You can use standard color names, Hexadecimal codes, or RGBA values. Using RGBA is recommended as it allows you to control the transparency (e.g., rgba(0, 0, 0, 0.85) for a semi-transparent dark gray).

Backdrop filter

This advanced feature applies graphical effects—such as blurring or color shifting—to the area behind the popup.

Click into the text field to select from predefined filters.
For example, applying a blur(5px) filter creates a modern "frosted glass" effect on your website content while the popup is active.

AJAX loader color

If your popup contains a form, a small loading animation appears during submission. Use this option to choose a color for the loading bar that matches your popup's theme.

Overlay Transitions

Customize how the background layer enters and exits the screen. You can choose from 10 built-in animations, including Fade, Slide, and Scale.

Opening / Closing transition: Choose the animation style for the overlay. The exit animation usually mirrors the entrance for a cohesive feel.
Overlay opening / closing duration: Specify the length of the transition in milliseconds (e.g., 400). A shorter duration for the overlay than the popup itself often creates a more dynamic visual hierarchy.