Four subtle Text-Effects to spice up your web-site

Happy Monday everyone! Let's learn four subtle CSS text effects that can add some dynamic to your website. ✨✨

Live Demo

So without further ado, let's begin

1. Vibrating Text on hover ⚡

This is a subtle effect where we can vibrate the individual characters when they are hovered on.

Code



.vibration span{
    transition: all 500ms;
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    margin-right: 10px;
    text-shadow: 1px 2px 3px #999;
}
.vibration span:hover{
    filter: blur(3px);
    animation: vibrate 50ms linear infinite forwards;
}
@keyframes vibrate{
    0% {
        transform: translateX(-1px) translateY(1px);
    }
    100% {
        transform: translateX(1px) translateY(-2px);
    }
}

We achieve this effect using the transform attribute to move the character across the y-axis and x-axis and loop the animation whenever hovered on.

We also add a small amount of blur to the character to emphasize the motion effect.

One important thing to note here is we have to make sure the span element has a display property of inline-block. Because transforms only work on elements that have a block display.

Codepen

2. Waves inside a text 🌊

In this effect, we use an experimental feature of chrome to add a stroke effect to the text. And then use clipping path property to create a wave effect.

Code



<section class="waves-demo">
        <div class="waves" data-word="WAVES">
            WAVES
        </div>
</section>



.waves {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    position: relative;
}
.waves:after{
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    animation: waves 2s ease-in-out infinite forwards;
}
@keyframes waves{
    0%, 100% {
        clip-path: polygon(0 66%, 11% 59%, 18% 51%, 26% 46%, 35% 41%, 48% 44%, 55% 54%, 63% 63%, 76% 60%, 82% 50%, 92% 48%, 100% 53%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0 66%, 8% 74%, 17% 77%, 28% 70%, 35% 57%, 48% 44%, 56% 39%, 69% 41%, 75% 47%, 84% 60%, 92% 61%, 100% 53%, 100% 100%, 0% 100%);
    }
}

Here, we use a -WebKit property called text-stroke to add a stroke effect to the text.

And then we use pseudo after element to fill in with white color.

And then we animate the clipping path property of the pseudo-element to form the wave effect.

For easy clip-path effects use this tool Clippy to create custom clipping paths. Please find below the gif to understand how I created the wave effect.

How to use Clippy

Codepen

3. Glowing Text 🌟

Code



.glow span {
    color: #fff;
    transition: all 300ms;
}
.glow span:hover {
    text-shadow: 0 0 10px #0698a5,
                 0 0 30px #0698a5,
                 0 0 80px #0698a5,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5;
}

For this effect, we use stacked text-shadow to create a glow effect.

We can use multiple values for text-shadow to stack on top of each other to create other stunning effects.

Here we kept on gradually increasing the blur-radius of the shadow and gave it a color of bright blue. Which accounts for the neon-blue glow

Codepen

4. Text Reveal Effect 🙈

Code



.reveal {
  color: #fff;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span {
  display: inline-block;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span:after {
  content: 'can stop it';
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  bottom: -10px;
  left: 50%;
  width: 200px;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition: all 400ms;
}

.reveal:hover {
  color: rgba(255, 255, 255, 0.1);
}

.reveal:hover span {
  transform: scale(2);
  color: #fff;
  margin: 0 45px;
}

.reveal:hover span:after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}