# Fade-Out Effect Above Members-Only Prompts

> Styles the members-only and paywall prompts from the WPIDE library with a soft fade over the last lines of the teaser and a clear call-to-action box.

- Type: CSS
- Runs: Site-wide header
- Category: [Memberships](https://wpide.com/library/category/memberships/)
- Tags: css, paywall, members
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/members-only-teaser-fade-css/

## Code

```css
.wpide-members-only,
.wpide-teaser-box,
.wpide-meter-wall {
    position: relative;
    margin-top: 2.5em;
    padding: 1.25em 1.5em;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.06);
    text-align: center;
}

.wpide-members-only::before,
.wpide-teaser-box::before,
.wpide-meter-wall::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 4em;
    margin-bottom: 1px;
    background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base, #fff));
    pointer-events: none;
}

.wpide-members-only a,
.wpide-teaser-box a,
.wpide-meter-wall a {
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .wpide-members-only::before,
    .wpide-teaser-box::before,
    .wpide-meter-wall::before {
        background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base, #111));
    }
}
```

## Notes

Targets the .wpide-members-only, .wpide-teaser-box and .wpide-meter-wall boxes; change the colours to match your theme.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fade-Out Effect Above Members-Only Prompts" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/