CSS Properties: How to add shadow to text

Last update on February 24 2024 12:26:15 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to add shadow to text</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
h1 { /* Styles all level 1 headings */
    text-shadow: 2px 4px #33CCFF; /* Adds a shadow effect to the text */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h1><strong>w3resource Tutorial</strong></h1><!-- Displays a level 1 heading with bold text "w3resource Tutorial" and a shadow effect -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document applies a shadow effect to the text of all level 1 headings.
CSS comments are added to explain each section of the code.
text-shadow: 2px 4px #33CCFF; applies a shadow effect to the text with a horizontal offset of 2 pixels, a vertical offset of 4 pixels, and a color of #33CCFF.

Live Demo :

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page