w3resource

HTML CSS Exercise: Blurry text with CSS3

Solution:

HTML Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Blurry text with CSS3</title>
<style type="text/css">
p{
color:#000000;  /* this is for old browsers */
font-size:50px;
font-family:arial;
text-shadow:   0 0 3px #000000,  
3px 0 3px #000000,
0 3px 3px #000000,
-3px 0 3px #000000,
0 -3px 3px #000000;
}
</style>
</head>
<body>
<p>This text is blurred</p>
</body>
</html>

Live Demo:

See the Pen blurry-text-answer by w3resource (@w3resource) on CodePen.


Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

HTML-CSS: Tips of the Day

How to turn off word wrapping in HTML?

You need to use the CSS white-space attribute.

In particular, white-space: nowrap and white-space: pre are the most commonly used values. The first one seems to be what you 're after.