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.

More on this here

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);
}

Again for this effect, we use the pseudo :after selector to add the additional text.

And then we use the transform property to scale the character on hover and add a little margin too, to enforce the pushing away effect.

Codepen

I hope you all learned something here. And if you have any doubts about any of the techniques do let me know.

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

Cheers 🍻
< Akhil />

All the images in live demo are sourced from Pexels