> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add a blur effect above the paywall

To optimize the integration of the paywall with your content, you can easily add an effect above your widget. Everything can be configured from your Dashboard, in the 'Appearances' section.

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/2/2/1/9221b6901b0ba800/6539f6e6-676b-4912-a95c-eb4ccb_wztl72.png)](https://downloads.intercomcdn.com/i/o/s22rivig/2126577773/f048b92e2d33d7a166f1b1b9116f/Capture+d%E2%80%99e%CC%81cran+2026-03-04+a%CC%80+11_09_08.png?expires=1773333900&signature=c121546474e38932ab8052ec606d80e3a364f7905e94613b68a796a589208f1b&req=diElEMx5moZYWvMW1HO4zV3zFTpJvNp2S7uMGJ1YpfZTotaOVW9f8oRjDd5P%0AK39LdNoidbDLb%2BI09n4%3D%0A)

# Apply the style in the parent container’s CSS block

In the section **Appearance > Edit Appearance Properties**

To do this, simply add a specific style to the parent container’s CSS block.

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/f/8/4/bf84dae49390a800/8fa66c25-9876-49e0-a995-0a90f2_1y5gmy4.png)](https://downloads.intercomcdn.com/i/o/s22rivig/2126584269/7e43986202fd36bd8e52321ae161/Capture+d%E2%80%99e%CC%81cran+2026-03-04+a%CC%80+11_21_10.png?expires=1773333900&signature=79c5daf50d8a5f1ed093418e20407df8004ffaab3e37070cc4d6d3b229b1bd8a&req=diElEMx2mYNZUPMW1HO4zTu5R12Wsn09cn8BJtustcOQ%2Bhr8jx%2Ffq40n9JuL%0ArYqcMhs6I4JRFVLb1co%3D%0A)

💡 The parent container is the iframe in which the paywall is displayed. The CSS added to the parent container’s CSS block will be inserted directly into the page where the paywall appears.

Here is the style to apply, which you can copy and paste into your block:

```
#poool-widget {  
  position: relative;  
}

#poool-widget::before {  
  content: "";  
  position: absolute;  
  pointer-events: none;  
  top: -90px;  
  left: 0;  
  width: 100%;  
  height: 90px;  
  background: linear-gradient(to bottom, transparent, white);  
  z-index: 10;  
}

#poool-widget:has(iframe.p3-outlet[style*="height: 1px"])::before,  
#poool-widget:has(iframe.p3-outlet[style*="height:1px"])::before {  
  display: none !important;  
}
```

And that’s it — your effect is ready! 🎉

You can adjust the **top** and **height** values according to the desired result.

Since it is applied within the page that contains the iframe, it won’t be visible in the Dashboard. Feel free to test the result directly on your website.