HomeTutorsContact

How To Create Glowing Text In CSS?

By Gulshan Saini
Published in CSS
May 12, 2020
1 min read

Make text pop by applying CSS property i.e. text-shadow to any element.

Example

Our boring text look as follows, without any shadow effect

Adding glow to text

Lets now make text standout from rest of content by applying glowing effect using CSS text-shadow property

As you can see in above example even after adding text-shadow our text still looks dull - so, how do we solve this?

To make it more catchy we are going to apply multiple shadows to an element separated by comma as follows

See, now the text looks more eye catching and that is how you can make boring headings more interesting by applying this simple shadow effect.

You must be asking how did I do that? Lets, break it down for simpilicity

  • First, I added second text shadow which is having high blur radius i.e. 30px and a color slightly lighter than the previous one. Now since this is defined on second position it will be applied after the first one.
  • Similarily, I added third and fourth shadows with blur radius of 50px and 70px respectively with some ligther colors than previous shadow in stack.

Easy, right?

Hope it helps. Thanks for reading.

Read more on css text shadow


Tags

#css
Previous Article
How To Give Text Shadow In CSS?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?

June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media