Add blur in CSS to text

To obtain a blurry text effect with CSS, simply apply a text shadow and make the color transparant.

This should be your CSS:

h1.blurred {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);

And this your HTML code:

<h1 class="blurred">This is blurred text!</h1>

Ultimately, you should see something like this:

Text blur in CSS

Text blur in CSS


Author Bio

Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.


Leave a Reply

Your email address will not be published. Required fields are marked *