This text is blurred.
Styling text in CSS is pretty easy and so is making it blurred.
In this article, we are going to show you two easy methods that you can use to blur the text using CSS.
These two methods are:
Let’s discuss each method in detail:
Make Text Blurred using the text-shadow Property
The first method of creating a blurred text is to make the text transparent and then apply a blur effect using the text-shadow property.
The blur intensity you can easily vary using the text-shadow property. A higher value adds more blur effect and a lower value adds a lower blur effect.
In the following example, we have set the blur radius(blur intensity) to 10px:
Example:
div{
color: transparent;
text-shadow: 0 0 10px black;
user-select: none;
}
Make Text Blurred using the filter Property
Another easy approach to make the text blurred is to use the filter property. The filter property accepts a function blur() which can be directly used to set the blur radius.
Here also, a larger value adds more blur effect and a lower value adds a lower blur effect. With this method, you don’t have to make the text transparent to create the blur effect.
Here is the same example as above but with the filter property:
Example:
div{
filter: blur(5px);
-webkit-filter: blur(5px);
user-select: none;
}
Note: It is to be noted that the text-shadow property only makes the text blurred while the filter property makes the whole element blurred. This means the background, border, outline, etc. will also be blurred in case of the filter property.
