How to create flickering text using CSS?

March 5, 2021

We are going to make use of text-shadow property and opacity property.

Smooth flickering effect

Let’s create a simple and smooth flickering effect first.

It will just a need any text in any tag. We’ll just add h1 tag and “flick” as texts.

Let’s add the style to make it clearly visible in dark background.

Now, all we need to do is add animation using @keyframes rule.

A bit uneven flickering effect

That’s what flickering effect actually is. An uneven and sudden sharp movement. This example doesn’t have that sharp effect but you can always change the @keyframes rules to adjust the effect.

For a little bit uneven effect all we need to do is change the @keyframes rule.

Here’s the modified example:

Here’s another example of text-shadow property.


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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to modify navigation menus in WordPress?WordPressLIKE and ILIKE Operators in PostgresPostgresSorting Arrays in JavaScriptJavaScriptKeyValuePipe in Angular 9AngularOpen Source Security Tools for Defense SecurityMiscWhat is Hadoop and Hadoop Ecosystem?MiscHow to make HTML form interactive and using CSS?CSSCreate a responsive pricing table using simple HTML and CSSCSSHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftFull and Partial ROLLUP in Postgresql with ExamplesPostgresRelative Length Units in CSSCSSHow Do You Make a Private VPN?Misc