Shadow Effects in CSS

What is shadow effect?

  • Shadow effects are used to add shadow to HTML elements.

  • CSS text-shadow is used to apply shadow effect on text.

  • We can also set multiple shadow effects on HTML elements.


Shadow Effects are: 

i) text-shadow

ii) box-shadow


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Shadow Efefcts in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


Text Shadow

  • As its name suggests the text shadow is used to add shadow effects to text.

  • We can add multiple shadow effects on the text by using commas (,).

  • And we can also add blur on the shadow.


Example

index.html

<!DOCTYPE html>
<html>
<head>
    <title> Text Shadow </title>
    <style>
        .firstText {
            text-shadow: 2px 2px;
        }

        .secondText {
            text-shadow: 2px 2px red;
        }
    </style>
</head>
<body>

    <h1 class="firstText"> HTML Simplified Series </h1>
    <h1 class="secondText"> CSS Masterr Series </h1>

</body>
</html>

Output:




Box Shadow

  • The box-shadow property is used to apply one shadow effect to the HTML element.

  • We can also add multiple box-shadow using commas (,).


Example

index.html

<!DOCTYPE html>
<html>
<title> box shadow in CSS </title>
<head>
    <style>
        div {
            width: 400px;
            height: 200px;
            padding: 20px;
            background-color: skyblue;
            box-shadow: 10px 10px red;
        }
    </style>
</head>
<body>

    <div> box shadow in CSS Master Series </div>

</body>
</html>

Output:




CSS Shadow Effects PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad