Grow effects with text shadow

By using text-shadow

Code snippets

Given a text in HTML — most probably headings — we can create a neon grow effect by using the following CSS.

h1 {
  text-shadow: 0 0 5px rgb(206,97,117), 
               0 0 90px white, 
               0 0 30px rgb(206,97,117), 
               0 0 50px red;
}

How it works

The text-shadow with blur effect is good to create something like neon light. But one text shadow is not enough. We can stack multiple text shadows together.

When stacking text shadows, we want them to have different value of blur, from very small value to large value.

Variarations

Actually different value can create vary grow effects by tuning the blur value, color, transparence and number of stacking shadows.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.