HTML CSS Exercise: Blurry text with CSS3

Last update on March 04 2024 06:50:48 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE HTML><!-- Defines the document type and HTML version -->
<html lang="en"><!-- Begins the HTML document with the specified language -->
<head><!-- Contains metadata and links to external resources -->
<meta charset=utf-8><!-- Specifies the character encoding for the document -->
<title>Blurry text with CSS3</title><!-- Sets the title of the document -->
<style type="text/css"> /* Begins CSS styling */
p{ /* Selects all <p> elements */
color:#000000;  /* Sets the text color to black */
font-size:50px; /* Sets the font size to 50 pixels */
font-family:arial; /* Sets the font family to Arial */
text-shadow:   0 0 3px #000000,   /* Applies a black shadow to the text with a blur effect */
3px 0 3px #000000, /* Adjusts the shadow offset horizontally to create a blurred effect */
0 3px 3px #000000, /* Adjusts the shadow offset vertically to create a blurred effect */
-3px 0 3px #000000, /* Adjusts the shadow offset horizontally in the opposite direction to create a blurred effect */
0 -3px 3px #000000; /* Adjusts the shadow offset vertically in the opposite direction to create a blurred effect */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section of the document -->
<body><!-- Begins the body section of the document -->
<p>This text is blurred</p><!-- Inserts a paragraph element with blurred text -->
</body><!-- Ends the body section of the document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document is set up to display a paragraph of text with a blurred effect using CSS3 styling.
The CSS code inside the <style> tag applies the blur effect to the text using the text-shadow property with multiple shadows offset in different directions.
Each shadow adds to the blur effect, creating a visually blurred appearance for the text.

Live Demo:

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

Supported browser


Yes	Yes	Yes	Yes	Yes