How to Change the Optin Overlay Transparency or Color

OptinMonster optins are highly customizable using CSS, and the appearance of the optin’s overlay transparency is no exception. Follow our documentation below to learn how to change the optin 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 optin’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 optin’s overlay to be pink:

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

Solid Color Overlay CSS