Press "Enter" to skip to content

Shadow Examples in CSS

Last updated on October 5, 2019

Definition :

    Which is meant for displaying the shadow on the content. There are 2 types of shadows is there text shadow and box shadow.

Program :

<html>

     <style tyep=”text/css”>

                     div

                                 {

                                 margin-top: 100px;

                                 width: 100px;

                                 height:100px;

                                 border: 1px solid green;

                                 font-size: 50px;

                                 text-shadow: 2px 2px;

                                 box-shadow: 4px 4px 4px 4px;

                                }

                </style>

                <body>

                     <div> Hello </div>

                </body>

</html>

Program 2 :

When we have to seen the inner side of the inset shadow to seen.

<html>

     <style tyep=”text/css”>

                     div

                                 {

                                 margin-top: 100px;

                                 width: 100px;

                                 height:100px;

                                 border: 1px solid green;

                                 font-size: 50px;

                                 text-shadow: 2px 2px;

                                 box-shadow: inset 4px 4px 4px 4px;

                                }

                </style>

                <body>

                     <div> Hello </div>

                </body>

</html>

Program 3 :

We have to provide the color to text .

<html>

     <style tyep=”text/css”>

                     div

                                 {

                                 margin-top: 100px;

                                 width: 100px;

                                 height:100px;

                                 border: 1px solid green;

                                 font-size: 50px;

                                 text-shadow: 2px 2px red;

                                 box-shadow: 2px 2px 2px 2px;

                                }

                </style>

                <body>

                     <div> Hello </div>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *