How to Change the Campaign Overlay Transparency or Color

OptinMonster campaigns are highly customizable using CSS, and the appearance of the campaign’s overlay transparency is no exception. Follow our documentation below to learn how to change the campaign overlay transparency or color.

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.

Transparent Overlay

If you want to maintain transparency, you can use an rgba color value. The first three values specify the color and the fourth value specifies the opacity of the color. A value of 1 is full opacity (solid color, no transparency) and a value of 0 is zero opacity (no color, fully transparent). Use decimal values to specify the transparency percentage you desire.

For example, with the following we’ll set our specific campaign’s overlay to have 80% opacity:

html div#om-vrssmhaxlmzmg1un {
    background-color: rgba(0,0,0,0.8) !important;
}

Transparent Overlay CSS

Solid Color Overlay

Alternatively, you can specify a solid background color for the overlay.

For example, with the following we’ll set our specific campaign’s overlay to be pink:

html div#om-vrssmhaxlmzmg1un {
    background-color: pink !important;
}

Solid Color Overlay CSS