CSS Lesson #22: The Soft Cookiewall No Scroll or Blur Effect

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

The Soft-Cookiewall can also be adjusted with some CSS and/or Javascript to create a No Scroll on the body until the banner has been dismissed, or a blur effect on the body until the banner has been dismissed. Below you will find the needed snippets and an example.

The Blur Effect

The current Soft Cookiewall adds a darkened overlay to highlight the Cookie Banner, to nudge for consent directly after a page load. Instead of a darkened overlay, you can also blur your website before consent. There’s a simple addition in CSS:

.cmplz-soft-cookiewall {
    backdrop-filter: blur(10px);

No Scroll on Body

It’s possible to block scrolling when the Cookie Banner is loaded. You will need some Javascript to add/remove classes on the body to get the desired effect. We recommend using an MU plugin to add the below snippet. To add an MU plugin you can follow this handy guide.

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress


Popular articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!