Create a Blurred Paywall Area

You’ve most likely seen one of these paywall sections on your travels to some media websites that give you a few free articles to read, but when you’ve hit your quota, they present a payment area with some of the content blurred with an article. Today we are going to pretend we run a media empire and implement this functionality.

The demo for this tutorial can be found here.

1. Create our mark-up for our fake article

So we ‘re just going to create some content here to use as filler for the paywall section.

<article>
   <h1>Libero scelerisque fringilla</h1>
   <p>Donec et orci aliquet nisl suscipit molestie sed sit amet tortor. 
   Duis vel urna ac mi sollicitudin lacinia mollis sit amet lorem. Sed 
   finibus erat nec libero scelerisque fringilla. Morbi at orci sed 
   urna vulputate vulputate. Nulla facilisi.</p>
   <p>Donec et orci aliquet nisl suscipit molestie sed sit amet tortor. 
   Duis vel urna ac mi sollicitudin lacinia mollis sit amet lorem. Sed 
   finibus erat nec libero scelerisque fringilla. Morbi at orci sed 
   urna vulputate vulputate. Nulla facilisi.</p>
   <p>Donec et orci aliquet nisl suscipit molestie sed sit amet tortor. 
   Duis vel urna ac mi sollicitudin lacinia mollis sit amet lorem. Sed 
   finibus erat nec libero scelerisque fringilla. Morbi at orci sed 
   urna vulputate vulputate. Nulla facilisi.</p>
</article>

2. Blur our text

Now with a few paragraphs added, we are going to create a CSS class to convert readable text to blurred illegible text. This will be the bottom area of the paywall content.

p.blur-text {
   filter: blur(5px);
   user-select: none;
   pointer-events: none;
}

…so we get something like this:

What are we doing here

• filter: blur(5px); – Applies a gaussian blur to CSS selector  with 5px radius.
• user-select: none; – Disallow user to select text
• pointer-events: none; – Disallow any events to be fired by mouse/touch event.

3. Create our paywall section

Working from the bottom of our article upwards, next we are going to create our paywall content to entice our users to subscribe to view our content.

Paywall mark-up

<div id="paywall-wrapper">
   <h4>Frontend Hero Subscribtion</h4>
   <p>Vehicula ornare, neque tortor iaculis urna, ut <strong>£12.99/mth</strong> consectetur.</p>
   <a class="btn" href="#">Subscribe Today!</a>
</div>

Paywall CSS

#paywall-wrapper {
   padding: 35px;
   border-radius: 5px;
   position: relative;
   margin-bottom: 30px;
   box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
}
   #paywall-wrapper * {
      text-align: center;
   }
      #paywall-wrapper .btn {
         left: 50%;
         transform: translateX(-50%);
         position: relative;
      }

Now we have a nice little paywall box between our paragraphs!

4. Fading the above text to white

The final thing we need to do to add some extra detail to the article is to create a new class called fade-out for the paragraph above the paywall area and fade the text to white.

p.fade-out {
   position: relative;
}
p.fade-out:after {
   content: "";
   height: 50%;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

The CSS is pretty basic so I won’t go into detail here – I’m just using the :after pseudo element to create a faded background from white to transparent (top – bottom),  50% of the  height of the paragraph, and then we are left with this:

That’s all for now, have fun.