dots Created with Sketch.
Yogesh Chauhan's Blog

How to create Glowing Text 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.

Animation

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

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Create a responsive image gallery using CSS gridCSSHow to check if the element exists using JavaScript and jQuery?JavaScriptWhat is React? Learn the basicsReactUNION and UNION ALL in PostgresPostgresThe basics of @import rule in SCSS (Sass)SCSSLearn to make a responsive gallery using CSS Grid and without media queriesCSSHow to Display Related Posts in WordPress?WordPressClean Form Input With These PHP Functions Before Inserting into DatabasePHPHigher Order Functions in JavaScript with ExamplesJavaScriptHow to create a secure random number using JavaScript?JavaScriptWP_Query Class in WordPressWordPressSteps to Secure a VPNMiscellaneous