Yogesh Chauhan's Blog

How to create Glowing Texts using CSS?

in CSS on January 24, 2021

We can use the text-shadow property to create the light effect around the text. After that we can increase and decrease that light effect using animation.

CSS text-shadow Property

The CSS text-shadow property adds shadow to texts.

We can add a comma separated list of values to add shadows to the text.

For example,

We can add more than one shadow to the text by adding a comma separated list of values.


To create a CSS animation, we need to style the element with the animation property/sub-properties. It will let us configure the timing, duration, and other details of how the animation sequence should progress.

We can use shorthand property to set the animation values. The syntax is:

animation: name duration timing-function delay iteration-count direction fill-mode;

We don’t need to use all sub-properties for our example.

The @keyframes Rule

To change the animation from the current style to the new style at certain times, we can specify the styles inside the @keyframes rule. We also need to bind the animation to an element.

Complete Text Glow Example

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to deploy Angular App on Dreamhost or Amazon S3 or firebase?AngularHow to make a curtain slider using jQuery and CSS?CSSHow to convert datetime to date format in JavaScript?JavaScriptHow to Install PHP Laravel on MacOS Catalina?PHP3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow to Validate User Name, Email Address and URL in PHP?PHPHow to add AppRoutingModule in Angular application using command line?AngularDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPressHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to create a smooth scrolling effect with CSS?CSSDynamically generate names in SCSS (animation example)SCSSSQL Inner JoinSQL/MySQL