Adobe Creative Cloud

June 23, 2015 /Code /

Creating Realistic Text with CSS

Today I’ll show how to make a realistic text effect with a tilt-shift blur, using CSS and JavaScript. This effect is nice for mockups, demos, and the like.

See the Pen Kinda Realistic Text by Lucas Bebber (@lbebber) on CodePen.

How it Works

First, let me explain how the technique works. Since there’s no tilt-shift filter effect, we’ll have to cheat a bit. We start by putting our text onto a 3D plane. how1 Now, here’s the trick: we clone that plane multiple times, and then rotate (3d rotation, on the X axis) each one by a small amount around an arbitrary origin, which will be the focal point. We also have to reduce the opacity of each layer, since we are overlaying them. how2 Finally, in order to make the blur smooth, we just make more clones of the text and reduce the angle difference between each layer. how3 Now, let’s see how to implement this effect…

The Code

    <div class="container">
      <div class="layer">
        Insert your text here.
      transform-origin:50% 0%;
      transform: perspective(1000px) scale(0.9) rotateX(60deg);
      transform-origin:50% 30vh;

So far, the code creates a text layer, places it inside a container, and rotates the container to the position we want our “camera” in. Here we are also setting up the focal point, through the transform-origin property in the .layer class – the 30vh value which means that the focus will be set at 30% the viewport height. Pay attention to the transform-style:preserve-3d property on the .container class as well. That will be necessary since we will be rotating the layers inside the container while keeping its 3D transform. Now let’s see how to clone the layers and create the tilt-shift blur effect. Here we’ll use JavaScript, with a little help from jQuery:

      // how many clones of the text layer we will make
      // the more, the smoother, but it also makes it heavier, so we'll have to strike a balance
      var steps=13; 

      // the total angle difference between the first and the last layers.
      // the bigger, the more pronounced the blur effect will be, but will also require more layers for it to be smooth
      var angle=6;

      // the angle variation between each layer
      var angleDiff=angle/steps;

      // the angle of the first layer
      var startAngle=-angle/2;

      // the opacity of each layer
      var opacityDiff=(1/steps)+0.07;

      var $container=$(".container");

      // the original layer that we will clone and later remove
      var $original=$(".layer");

      // making all the clones
      for(var i=0;i<steps;i++){
          // angle of the current layer
        var a=startAngle+(angleDiff*i);
        var $newLayer=$original
          }) ;
      // remove the original layer

This covers the basics of what we need to get the effect working. Then, we should set the element’s size, position, rotation, color, etc. Here’s a demo of what we’ve made so far, with a few guides to help you understand what is going on.

See the Pen Realistic Text Effect (updated, simple version) by Lucas Bebber (@lbebber) on CodePen.

Getting Fancy

After that, you can tweak the effect to your liking – for instance, adding shading to the text by overlaying it with a gradient, putting a paper texture as background, and so on. I made a few examples to give you an idea.

There are a couple of details in action here: there’s a shading overlay over the text (and the background has a slight shading as well), and there’s a subtle appearance of flipped text behind the main text, to simulate the backside of a somewhat thin paper.

See the Pen Realistic Text Effect (updated, simple version) by Lucas Bebber (@lbebber) on CodePen.

We can also scroll the text and continually change the focus to make an infinite scrolling animation with this effect (currently this demo works best on Chrome).

See the Pen Realistic Text Effect (updated) by Lucas Bebber (@lbebber) on CodePen.

Finally, we can change the focus of the text according to, for example, the mouse’s position. Besides, text is editable in this example: to accomplish that, we set our layers as contenteditable, listen for changes, and update all layers when there’s a change in the text.

And here we’re done:

See the Pen Kinda Realistic Text (with changeable focal center) by Lucas Bebber (@lbebber) on CodePen.

Hope this has been interesting and useful!


Join the discussion

  • By Lindsay Roberts - 3:58 PM on June 25, 2015  

    Neat! 🙂

  • By Daniel - 11:28 PM on June 30, 2015  

    That looks so cool mate, nice work!

  • By Nerdowski - 10:27 AM on July 1, 2015  

    Great job!

  • By henry - 3:29 AM on July 6, 2015  

    great work!

  • By Brett Powell - 6:44 PM on July 6, 2015  

    Brilliant work Lucas, the effect is awesome. Thanks for taking the time to share it. Cheers!