Q:

How to apply shadow effect on text using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  305 
Very Easy
0

How to apply shadow effect on text using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to disable spell checking from Input Box and T... >>
<< How to apply shadow effect on elements using CSS...