Quick Tip: Blurred Text with CSS

05.26.2013 by Ilia Raiskin
CSS Design Typography Quick

In some situations, a blurred text could be useful for the design. A blurred text should contain information that is not important for a user as long as it is out of focus. Blurring texts is also useful to highlight sharp texts. It is easy to create this effect: We use the CSS property text-shadow to create the blur effect, and set the texts color to rgba(0,0,0,0) or transparent.

CSS code


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

You can reduce the third value of text-shadow in order to sharpen the text, or increase it to add more blur. You can also use any color you want.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.