Quick Tip: Blurred Text with CSS

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

Result

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.