Yogesh Chauhan's Blog

How to create a blurry text effect using CSS?

in CSS on July 26, 2021

Similar Post

How to create Glowing Texts using CSS?

How to create Flickering Texts using CSS?

We can use CSS text-shadow property to create all different kinds of text effects.

The syntax is:


text-shadow: x-offset-shadow y-offset-shadow blur-radius color;

You can have multiple shadows. In that case the shadows are applied front-to-back.

Basic Example

Change the blur-radius in text-shadow values and create different types of blurry texts.


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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
CREATE DATABASE in PostgreSQLPostgresHTML Copyright SymbolHTMLHow to avoid element shift on border change while hovering in CSS?CSSHow to detect if browser supports WebP format on server side PHP script?PHPHow to Remove PHP File Extensions From Your Website URLs?PHPAngular: Templates, directives, data binding, Services and dependency injectionAngularUseful (and probably ignored) HTML tags: Part 1HTMLSome interesting HTML Input Attributes to rememberHTMLHow to get ACF values from custom post type?WordPressHow to hide and show menu on scroll using JavaScript and CSS?CSSHow to create a simple stopwatch using JavaScript?JavaScriptHow to get category name using post id in WordPress?WordPress