Four subtle Text-Effects to spice up your web-site
Tags: beginners, css, tutorial, webdev
Published: 2020-08-10 09:44:58

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

## [Live Demo](https://akhilarjun.github.io/UI-Library/text-effects/text-effects-demo.html)

So without further ado, let's begin

## 1. Vibrating Text on hover ⚡

![Vibrating Text](https://dev-to-uploads.s3.amazonaws.com/i/ib1c60y5nnr1xyxnmmvu.gif)

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

### Code

```css
.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](https://drafts.csswg.org/css-transforms-1/#css-values)

### Codepen
{% codepen https://codepen.io/akhilarjun/pen/YzqXvYv %}

## 2. Waves inside a text 🌊

![Waves Text Effect](https://dev-to-uploads.s3.amazonaws.com/i/0pqhtva4re8d9nuz9lg1.gif)

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

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

```css
.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](https://bennettfeely.com/clippy/) to create custom clipping paths. Please find below the `gif` to understand how I created the wave effect.

[How to use Clippy](https://akhilarjun.github.io/UI-Library/text-effects/how-to-use-clippy.html)

### Codepen
{% codepen https://codepen.io/akhilarjun/pen/GRZJBEg %}

## 3. Glowing Text 🌟

![Glow Text](https://dev-to-uploads.s3.amazonaws.com/i/ebex85rz6xmk4bldcjsq.gif)

### Code
```css
.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
{% codepen https://codepen.io/akhilarjun/pen/VwaLBEZ %}

## 4. Text Reveal Effect 🙈

![Text Reveal Effect](https://dev-to-uploads.s3.amazonaws.com/i/xlvf6z4ymwoqya4unuxf.gif)

### Code
```css
.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
{% codepen https://codepen.io/akhilarjun/pen/QWNbBPO %}

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 🤞
<br />
[<img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" height="51px" width="217px">](https://www.buymeacoffee.com/akhilarjun)

Cheers 🍻
&lt; Akhil /&gt;

##### All the images in live demo are sourced from [Pexels](https://www.pexels.com/)