WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to apply shadow effect on text using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS text-shadow property

You can simply use the CSS text-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on text elements. You can also apply more than one shadow (applied front-to-back) through providing a comma-separated list of shadows.

Each shadow is specified as an offset from the text (horizontal and vertical), along with the blur radius value and optional color value. Let's try out an example to see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Text Shadow Effect</title>
<style>
    p{
        font: 26px sans-serif;
    }
    p.shadow{
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    }
    p.shadow-multiple{
        text-shadow: 2px 2px 3px yellow, 3px 3px 5px red;
    }
    p.shadow-outline{
        color: #fff;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    }
</style>
</head>
<body>
    <p class="shadow">This is a simple example of text shadow effect.</p>
    <p class="shadow-multiple">This is a simple example of multiple text shadow effect.</p>
	<p class="shadow-outline">This is one more example of multiple text shadow effect.</p>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties